/* АкварИИум — стили лендинга aiquarium.ru.
   Вынесены из index.html отдельным файлом: так его правит человек, а не
   ищет нужную строку среди тысячи. Браузер кеширует их отдельно от разметки,
   поэтому правка текста больше не заставляет перекачивать все стили.

   Акцент. На весь лендинг он один — #d99578, ровно тот, которым набраны
   буквы «ИИ» в логотипе. Заливки, полосы, акцентные слова, надзаголовки
   секций — всё этим цветом. Затемнённых вариантов больше нет: решение
   владельца бренда, узнаваемость важнее контраста.

   Контраст. Нейтралы и текст проходят WCAG AA. Два сознательных исключения:
   белый текст на оранжевой кнопке (3,58:1) и акцентная терракота как цвет
   текста на бежевом (2,76:1). Оба — фирменные цвета, довести их до нормы
   можно только перестав быть собой. Риск принят.
   Если правите палитру — пересчитайте контраст, а не полагайтесь на глаз. */

/* ─────────────────────────────────────────────────────────────
   АкварИИум — демо-лендинг.

   Тот же приём, что и в демо «Анализ»: контент и палитра свои,
   конструкция — от Temvio.

   · Страница не «секции с воздухом», а стек карточек одной геометрии:
     один радиус, одна толщина рамки, один шаг отступов. Тон меняет
     только заливку — тёмный блок и светлый по-прежнему стоят на одной
     колонке с шапкой и подвалом.
   · Каждая карточка пронумерована и открывается mono-лейблом: читателю
     видно, где он и сколько осталось.
   · Типо-шкала скромная. Страница спорит структурой и цветом, а не
     кеглем: от заголовка секции до основного текста — один шаг.
   · Оранжевый #FF3A03 держится за одно значение — действие. Терракота
     несёт акцент и «да» в сравнениях. Всё остальное — тёплый нейтрал.
   · Движение — только там, где оно что-то доказывает: подсветка в
     герое обходит круг участников, таблицы и полосы приезжают один раз.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:            #f0eee7;
  --bg-warm:       #faf9f6;
  --surface:       #fefdfb;
  --surface-alt:   #e8e4dc;
  --surface-muted: #e2dbce;
  /* Тот же тёмный, что в логотипе. Раньше здесь был #141413 — вдвое темнее
     по светлоте, и вордмарк в шапке выглядел мягче навигации рядом с ним.
     Токен красит не только буквы: им же залиты тёмная карточка финала,
     пузырьки и маркеры, поэтому вся страница стала на тон мягче. */
  --text:          #2a2a29;
  --text-2:        #4a4540;
  --text-3:        #716960;
  --text-muted:    #706961;
  --text-on-dark:  #c5c0b8;
  --accent:        #d99578;
  --cta:           #FF3A03;
  --cta-hover:     #e03300;
  --border:        #e8e4dc;
  --border-light:  #e0dbd2;

  --grid-max: 72rem;
  --gutter: 1.5rem;
  --header-h: 4rem;

  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  --shadow-sm: 0 1px 4px rgba(20,20,19,.06);
  --shadow-md: 0 2px 8px rgba(20,20,19,.1);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.08);

  --dur-tap: 120ms;
  --dur-state: 220ms;
  --dur-layout: 380ms;
  --dur-enter: 500ms;
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 600px) { body { font-size: 1rem; } }

::selection { background: var(--accent); color: var(--text); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 24px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 16px; border-radius: var(--r-full); }

/* ── Сетка ───────────────────────────────────────────────── */

.container { width: 100%; max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--gutter); }

.stack {
  display: grid; gap: 20px;
  width: 100%; max-width: var(--grid-max); margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}

.card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 28px 24px;
  position: relative; overflow: hidden;
  scroll-margin-top: 7rem;
}
@media (min-width: 640px)  { .card { padding: 40px; } }
@media (min-width: 1024px) { .card { padding: 52px; } }

.card--sand { background: var(--bg-warm); border-color: transparent; }
.card--ink  { background: var(--text); color: var(--text-on-dark); border-color: transparent; }
.card--ink h2, .card--ink h3, .card--ink strong, .card--ink b { color: #fff; }

/* ── Типографика ─────────────────────────────────────────── */

h1, h2, h3 { font-family: 'Rubik', Georgia, serif; margin: 0; }

/* 20ch, а не 17: заголовок «ИИ для руководителей — на ваших задачах, а не на
   учебных примерах» при 17ch ложится в четыре строки и выталкивает низ героя
   за край экрана на 1280×720. Двадцать знаков дают три строки и 58px запаса,
   причём кегль остаётся прежним — режется только граница переноса. */
.t-hero { font-size: 2.15rem; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; max-width: 20ch; text-wrap: balance; }
@media (min-width: 640px)  { .t-hero { font-size: 2.9rem; } }
@media (min-width: 1024px) { .t-hero { font-size: 3.4rem; } }

.t-section { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; max-width: 24ch; text-wrap: balance; }
@media (min-width: 640px) { .t-section { font-size: 1.9rem; } }

.t-figure { font-family: 'Rubik'; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .t-figure { font-size: 3rem; } }

.label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(20,20,19,.45); margin: 0;
}
.label--signal { color: var(--accent); }
.label--strain { color: var(--cta); }
.card--ink .label { color: rgba(240,238,231,.5); }
.card--ink .label--signal { color: var(--accent); }
.card--ink .label--strain { color: var(--cta); }

.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

.lede { margin: 16px 0 0; max-width: 62ch; color: var(--text-2); line-height: 1.65; }
.card--ink .lede { color: var(--text-on-dark); }

.note {
  margin: 24px 0 0; border-left: 2px solid var(--accent);
  padding-left: 16px; font-size: .875rem; line-height: 1.6;
  color: var(--text-muted); max-width: 64ch;
}
.card--ink .note { border-color: var(--cta); color: rgba(240,238,231,.6); }

.small { font-size: .875rem; line-height: 1.6; color: var(--text-muted); }

/* ── Пузырьки ────────────────────────────────────────────── */

.bbl { position: absolute; border-radius: 50%; background: var(--text); pointer-events: none; }
.bbl::after {
  content: ''; position: absolute; top: 18%; right: 18%;
  width: 38%; height: 38%; border-radius: 50%;
  background: var(--bg); opacity: .6;
}
.card--ink .bbl { background: var(--bg); }
.card--ink .bbl::after { background: var(--text); opacity: .5; }

.field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.field .bbl { opacity: .05; }


/* ── Шапка ───────────────────────────────────────────────── */

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(240,238,231,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-state) var(--ease-out-quart);
}
header.site.scrolled { border-bottom-color: var(--border); }
header.site .container { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; gap: 10px; font-family: 'Rubik'; font-weight: 600; font-size: .95rem; text-decoration: none; letter-spacing: -.01em; flex: none; }
.brand .mark { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--text); flex: none; }
.brand .mark::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); opacity: .65; }
/* Вордмарк — пропорция 13,5:1, поэтому задаём высоту, а не ширину: каждый лишний
   пиксель высоты забирает 13,5 пикселей ширины. В шапке рядом с ним семь пунктов
   навигации, дата и кнопка, и на 1152px ряд сходится только при 15px. */
.brand-logo { height: 15px; width: auto; display: block; }
@media (max-width: 619px) { .brand-logo { height: 13px; } }

nav.site { display: none; gap: 26px; }
@media (min-width: 980px) { nav.site { display: flex; } }
nav.site a { position: relative; font-size: .875rem; color: var(--text-3); text-decoration: none; transition: color var(--dur-state) var(--ease-out-quart); }
nav.site a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-state) var(--ease-out-quart);
}
nav.site a:hover { color: var(--text); }
nav.site a:hover::after, nav.site a:focus-visible::after { transform: scaleX(1); }

.head-right { display: flex; align-items: center; gap: 14px; flex: none; }

/* ── Кнопки ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 32px; border-radius: var(--r-full);
  font-family: 'Open Sans', sans-serif; font-size: 1.05rem; font-weight: 600;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  background: var(--cta); color: #fff; position: relative;
  transition: background var(--dur-state) var(--ease-out-quart), transform var(--dur-tap) var(--ease-out-quart);
}
.btn:hover { background: var(--cta-hover); }
.btn:active { transform: translateY(1px); }
.btn::after {
  content: ''; position: absolute; top: -2px; left: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: rgba(255,255,255,.8); opacity: 0; pointer-events: none;
}
.btn:hover::after { animation: btnBubble .6s var(--ease-out-quart) forwards; }
@keyframes btnBubble {
  0%   { opacity: .6; transform: translateY(0) scale(1); }
  100% { opacity: 0;  transform: translateY(-28px) scale(.4); }
}
.btn--sm { padding: 8px 18px; font-size: .875rem; }

/* Пузырьки, разлетающиеся из точки нажатия. Приём взят с aiquarium.ru, но там
   он висит на наведении каждой карточки — на длинной странице это превращается
   в постоянный шум. Здесь он привязан к клику по кнопке: единственное действие
   на странице, которое стоит подтвердить. */
.burst {
  position: absolute; border-radius: 50%; background: var(--text);
  pointer-events: none; z-index: 3;
  animation: burst .55s var(--ease-out-quart) forwards;
}
.burst::after {
  content: ''; position: absolute; top: 18%; right: 18%;
  width: 40%; height: 40%; border-radius: 50%; background: var(--bg); opacity: .6;
}
@keyframes burst {
  0%   { opacity: .35; transform: translate(0, 0) scale(1); }
  100% { opacity: 0;   transform: translate(var(--bx), var(--by)) scale(.3); }
}

/* ── Лента расписания ────────────────────────────────────── */
/* Кружок с номером — тот же пузырёк, что и во всём бренде: тёмная точка
   с бликом. На мобильном лента идёт вниз, на десктопе — вправо, и точки
   соединяет волосяная линия, чтобы читался порядок, а не набор плиток. */
.tline { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 780px) { .tline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }

.tline-item { position: relative; padding-left: 50px; }
@media (min-width: 780px) { .tline-item { padding-left: 0; padding-top: 48px; } }

.tline-dot {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  font-family: 'Rubik', sans-serif; font-size: .95rem; font-weight: 600;
}
.tline-dot::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--bg); opacity: .5;
}

.tline-item:not(:last-child)::before {
  content: ''; position: absolute; background: var(--border-light);
  left: 16px; top: 40px; width: 1px; bottom: -26px;
}
@media (min-width: 780px) {
  .tline-item:not(:last-child)::before {
    left: 42px; right: -16px; top: 16px; width: auto; height: 1px; bottom: auto;
  }
}

.tline-date { display: block; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 1.05rem; }
.tline-topic { display: block; margin-top: 4px; font-size: .9rem; color: var(--text-3); }
.btn--ghost { background: var(--surface); color: var(--text-2); border: 1.5px solid var(--border-light); }
.btn--ghost:hover { background: var(--surface); border-color: var(--text); color: var(--text); }
.card--ink .btn--ghost { background: transparent; color: var(--text-on-dark); border-color: rgba(240,238,231,.28); }
.card--ink .btn--ghost:hover { border-color: var(--bg); color: #fff; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

/* ── Hero ────────────────────────────────────────────────── */

/* Высоту героя задаёт не текст, а эта строка: карточка растягивается на долю
   экрана независимо от содержимого. При 90dvh под фактами оставалось больше
   ста пикселей пустоты, и низ карточки упирался в край экрана. 84dvh убирает
   пустоту и гарантирует, что герой виден целиком вместе с отбивкой снизу. */
.hero { min-height: calc(84dvh - var(--header-h) - var(--gutter)); display: flex; }
.hero .grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    repeating-linear-gradient(to right,  rgba(20,20,19,.06) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(to bottom, rgba(20,20,19,.06) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(to right,  rgba(217,149,120,.14) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(217,149,120,.14) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(120% 90% at 80% 25%, #000 20%, transparent 78%);
}
.wash { position: absolute; border-radius: 50%; pointer-events: none; }
.wash-a { top: -20%; right: -10%; width: 68%; height: 68%;
  background: radial-gradient(closest-side, rgba(217,149,120,.32), transparent); animation: washA 34s ease-in-out infinite alternate; }
.wash-b { bottom: -26%; right: 6%; width: 74%; height: 74%;
  background: radial-gradient(closest-side, rgba(226,219,206,.7), transparent); animation: washB 43s ease-in-out infinite alternate; }
@keyframes washA { to { transform: translate3d(-6%, 6%, 0) scale(1.16); } }
@keyframes washB { to { transform: translate3d(5%, -7%, 0) scale(1.08); } }

/* align-content, а не только align-items: в одноколоночном режиме строки сетки
   иначе растягиваются по всей высоте героя, и между текстом и рыбой повисает
   пустая полоса в пол-экрана. */
.hero-grid { position: relative; display: grid; gap: 40px; width: 100%; align-items: center; align-content: center; }
/* Рыба уходит вбок как можно раньше. Пока она стоит под текстом, она добавляет
   к высоте героя свои 93px плюс шаг сетки, и первый экран перестаёт вмещать
   карточку целиком. Сбоку она этой высоты не стоит вообще. */
@media (min-width: 720px)  { .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0, 13rem); gap: 28px; } }
/* 70 на 30. Текст — главный житель героя, ему нужна ширина: чем шире колонка,
   тем меньше строк в заголовке и тем ниже вся карточка. Рыбе хватает трети,
   при этом сама она не уменьшается — уменьшается только её колонка. */
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 48px; } }

.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; }

/* Первый экран на мобильном. Герой обязан помещаться целиком, вместе с рыбой:
   если низ карточки уходит под срез, человек не видит ни кнопки, ни фактов.
   Запасы срезаны по одному — шаг сетки, поля секции, кегль заголовка, поля
   кнопок и размер рыбы, — чтобы не выкидывать из героя ни одного элемента.
   В одну строку кнопки не ставим: под них есть 277px, а нужен 361, и ужимать
   их до этой ширины значило бы испортить размер тап-таргета. */
@media (max-width: 1023px) {
  .hero { padding-block: 20px; }
  .hero-grid { gap: 18px; }
  .hero .label { font-size: .7rem; letter-spacing: .06em; }
  .hero .t-hero { font-size: 1.9rem; }
  .hero .lede { font-size: 1rem; margin-top: 12px; }
  .hero .actions { gap: 10px; margin-top: 22px; }
  .hero .actions .btn { padding: 11px 17px; font-size: .92rem; }
  .hero .small { margin-top: 10px; }
  .hero-meta { margin-top: 12px; gap: 6px 18px; }
}

/* Экраны ниже 700px по высоте — iPhone SE и подобные. Даже с одной кнопкой
   в героe тут не хватает места на всё: строке про анкету и полосе фактов нужно
   140px, а свободно 90. Прячем полосу фактов — те же цифры стоят в блоке-ответе
   «Формата» экраном ниже. Строку про анкету оставляем: кнопка теперь говорит
   «Записаться на практикум», и без неё человек видит обязательство без объяснения,
   что денег на этом шаге никто не просит. */
@media (max-width: 719px) and (max-height: 700px) {
  .hero { padding-block: 12px; }
  .hero-grid { gap: 8px; }
  .hero-meta { display: none; }
}
.hero-meta span { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--text-3); letter-spacing: .02em; }

/* Рыба-пузырь — маскот бренда. Собрана из тех же кругов с бликом, что и вся
   пузырьковая система, поэтому в герое читается не как вставленная картинка,
   а как самый крупный пузырёк на странице.

   Рыба и пузырьки лежат в двух отдельных SVG, и это главное решение здесь.
   Пока пузырьки жили внутри картинки рыбы, её содержимое менялось каждый кадр:
   браузер не мог закешировать её как слой и перерисовывал все 69 кружков,
   округляя позицию до пикселя устройства. Дрейф шёл со скоростью 0,022 пикселя
   за кадр, накапливался до целого пикселя примерно за тридцать кадров и выходил
   рывком — это и читалось как дрожь. will-change тут не помогал: слой невозможен,
   пока внутри что-то анимируется.
   Теперь содержимое рыбы неподвижно, она держится отдельным слоем, и дрейф
   считает композитор. Пузырьки — четыре кружка в своём SVG: их перерисовка
   стоит копейки, а движутся они впятеро быстрее, поэтому округление не видно. */
.puffer-wrap { width: 100%; }
/* Сцена задаёт размер обеим картинкам и служит им общей системой координат. */
.puffer-stage { position: relative; width: 100%; max-width: 280px; margin: 0 auto; }
/* Ниже десктопа рыба идёт под текстом, а не сбоку: там она должна быть
   заметно меньше, иначе первый экран занимает одна иллюстрация. */
@media (max-width: 1023px) { .puffer-stage { max-width: 150px; } }
/* Ниже 720px рыбы нет. Там она уезжала под текст, занимала около ста пикселей
   высоты вместе с шагом сетки и вытесняла с первого экрана то, что продаёт:
   лид целиком и полосу фактов. Сбоку её поставить некуда — ширины нет. */
@media (max-width:  719px) { .puffer-wrap { display: none; } }

.puffer { width: 100%; height: auto; display: block; overflow: visible; }
.puffer-bbls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Зеркало считается от viewBox, а не от габаритов содержимого. Это принципиально:
   у рыбы и у горстки пузырьков разные габариты, и при отражении вокруг
   собственного центра каждая картинка ушла бы на свою величину — пузырьки
   оторвались бы ото рта. Общий viewBox даёт обеим одну ось отражения. */
.puffer-stage .swim { transform-box: view-box; transform-origin: center; transform: scaleX(-1); }

/* Дрейф лежит на элементе со статичным содержимым — только поэтому он гладкий.
   Тот же ход дублируется на слое пузырьков, иначе рыба уплывала бы от них.
   Пузырькам округление не вредит: их четыре, они полупрозрачные и движутся сами.
   На кеш рыбы это не влияет — элементы разные.

   Амплитуда своя на каждом размере: на десктопе рыба 280px и ±10px читаются
   как спокойный ход, а на мобильном она 80px, и там те же десять пикселей
   выглядели бы прыжками. Кадры прописаны числами, а не через переменную:
   var() в keyframes мешает браузеру отдать анимацию композитору, а весь смысл
   разделения слоёв был именно в том, чтобы её туда отдать. */
.puffer, .puffer-bbls { animation: floatLg 2.2s ease-in-out infinite alternate; will-change: transform; }
@keyframes floatLg { 0% { transform: translate3d(0,  10px, 0); } 100% { transform: translate3d(0, -10px, 0); } }
@keyframes floatMd { 0% { transform: translate3d(0,   6px, 0); } 100% { transform: translate3d(0,  -6px, 0); } }
@keyframes floatSm { 0% { transform: translate3d(0,   3px, 0); } 100% { transform: translate3d(0,  -3px, 0); } }
@media (max-width: 1023px) { .puffer, .puffer-bbls { animation-name: floatMd; } }
@media (max-width:  719px) { .puffer, .puffer-bbls { animation-name: floatSm; } }

.puffer-stage .bbl-out {
  transform-box: fill-box;
  transform-origin: center;
  animation: pufferBbl 4.5s var(--ease-out-quart) infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes pufferBbl {
  0%   { opacity: 0;   transform: translate(0,0) scale(.6); }
  12%  { opacity: .45; transform: translate(0,0) scale(1); }
  100% { opacity: 0;   transform: translate(var(--drift, -4px), -32px) scale(.3); }
}

/* ── Боли ────────────────────────────────────────────────── */

.pains { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 760px) { .pains { grid-template-columns: 1fr 1fr; } }
.pain {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 24px 22px; position: relative; overflow: hidden;
  transition: transform var(--dur-state) var(--ease-out-quart), box-shadow var(--dur-state) var(--ease-out-quart);
}
.card--sand .pain { background: var(--surface); }
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pain h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; margin: 12px 0 10px; }
.pain p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-2); }

/* ── Шаги ────────────────────────────────────────────────── */

.steps { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 22px; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative;
  background: var(--text); color: var(--bg);
  font-family: 'Rubik'; font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step-num::after { content: ''; position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.85); }
.step h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.step p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-2); }

.perks { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .perks { grid-template-columns: 1fr 1fr; } }
.perk { padding-top: 16px; border-top: 1px solid var(--border); }
.perk b { display: block; font-family: 'Rubik'; font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.perk span { font-size: .875rem; line-height: 1.6; color: var(--text-2); }

/* ── Цифра-доказательство ────────────────────────────────── */

.proof { display: grid; gap: 26px; margin-top: 34px; align-items: center; }
@media (min-width: 820px) { .proof { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 48px; } }
.proof-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.proof-from { font-family: 'Rubik'; font-size: 1.6rem; font-weight: 600; color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.proof-arrow { height: 2px; width: 46px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out-expo) .12s; }
[data-play] .proof-arrow { transform: scaleX(1); }
.proof-to { opacity: 0; transform: translateX(-.75rem); transition: opacity .45s var(--ease-out-expo) .42s, transform .45s var(--ease-out-expo) .42s; }
[data-play] .proof-to { opacity: 1; transform: none; }
.proof-to b { font-family: 'Rubik'; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }

/* ── Таблицы ─────────────────────────────────────────────── */

.table-wrap { margin-top: 30px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-wrap table { min-width: 560px; }
th {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-3);
  text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: bottom;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
td:first-child { color: var(--text); font-weight: 600; }
tbody tr { transition: background var(--dur-state) var(--ease-out-quart); }
tbody tr:hover { background: rgba(217,149,120,.05); }
tbody tr:last-child td { border-bottom: 0; }
td.result { background: rgba(217,149,120,.08); font-weight: 600; color: var(--text); }
td.num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Матрица сравнения ───────────────────────────────────── */

/* Выше брейкпоинта — обычная таблица на четыре колонки. Ниже — шапка
   прячется, и каждая строка становится самостоятельным блоком: критерий
   заголовком, под ним по строке на формат. Не горизонтальный скролл:
   четыре колонки на 375px нечитаемы в любом случае, а внутренних
   прокруток на странице больше нигде нет. */
.matrix { min-width: 640px; }
.matrix td { text-align: left; }
.matrix .own { background: rgba(217,149,120,.08); font-weight: 600; color: var(--text); }
.matrix th.own { color: var(--accent); background: rgba(217,149,120,.08); }

.mk { display: inline-flex; align-items: center; gap: 8px; }
.mk i { width: 10px; height: 10px; border-radius: 50%; display: block; position: relative; flex: none; }
.mk--yes i { background: var(--text); opacity: .75; }
.mk--yes i::after { content: ''; position: absolute; top: 15%; right: 15%; width: 40%; height: 40%; border-radius: 50%; background: var(--bg); opacity: .7; }
.mk--no i { border: 1.5px solid var(--text); opacity: .2; }

/* Перестроение вместо горизонтальной прокрутки — для всех таблиц, где
   последняя колонка и есть вывод: «стало», «результат», «АкварИИум».
   При прокрутке она уезжает за край, то есть теряется ровно то, ради чего
   таблицу и читают. Ниже брейкпоинта шапка прячется, каждая строка
   становится блоком, а имя колонки приезжает из data-label. Разметка та же,
   для скринридера ничего не меняется. */
@media (max-width: 780px) {
  .table-wrap.flow-wrap { overflow: visible; }
  /* Селектор с той же специфичностью, что и `.table-wrap table { min-width }`,
     иначе минимальная ширина переживает перестроение и строки снова уезжают. */
  .table-wrap .flow { min-width: 0; }
  .flow thead { display: none; }
  .flow tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .flow tbody tr:last-child { border-bottom: 0; }
  .flow td { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 5px 0; border: 0; }
  .flow td.head { display: block; font-weight: 600; padding: 0 0 8px; color: var(--text); }
  .flow td[data-label]::before {
    content: attr(data-label); flex: none;
    font-family: 'JetBrains Mono', monospace; font-size: .625rem;
    letter-spacing: .14em; text-transform: uppercase; opacity: .5;
  }
  .flow td.result, .flow td.own { background: transparent; }
  .flow td.result::before, .flow td.own::before { color: var(--accent); opacity: 1; }
}

/* ── Три уровня ──────────────────────────────────────────── */

.tiles { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 860px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 26px 24px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-state) var(--ease-out-quart), box-shadow var(--dur-state) var(--ease-out-quart);
}
.card--sand .tile { background: var(--surface); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.tile h3 { font-size: 1.3rem; font-weight: 700; margin: 14px 0 10px; }
.tile p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-2); }
/* Полоса прижата к низу карточки: тексты у трёх плиток разной длины, а линии
   внизу должны стоять на одной высоте — иначе они читаются как разные величины. */
.tile p { margin-bottom: 22px; }
.tile .bar { height: 4px; border-radius: var(--r-full); background: var(--surface-alt); margin-top: auto; overflow: hidden; }
.tile .bar span { display: block; height: 100%; background: var(--text); opacity: .8; transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out-expo); transition-delay: var(--d, 0ms); }
[data-play] .tile .bar span { transform: scaleX(var(--w, .5)); }
.tile--1 .bar span { background: var(--accent); opacity: 1; }
.tile--3 .bar span { background: var(--accent); opacity: 1; }

/* ── Цитаты и отзывы ─────────────────────────────────────── */

.quotes { display: grid; gap: 20px; margin-top: 30px; }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } }
blockquote {
  margin: 0; font-family: 'Rubik'; font-style: italic; font-size: 1.05rem; line-height: 1.55;
  color: var(--text-2); border-left: 3px solid var(--accent); padding-left: 20px;
}
blockquote cite { display: block; margin-top: 12px; font-style: normal; font-family: 'Open Sans'; font-size: .8rem; color: var(--text-muted); }

.reviews { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 860px) { .reviews { grid-template-columns: 1fr 1fr; } }
.review {
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.card--sand .review { background: var(--surface); }
.review p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text-2); }
.review footer { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.review img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); flex: none; }
.review b { display: block; font-family: 'Rubik'; font-weight: 600; font-size: .95rem; }
.review span { font-size: .8rem; color: var(--text-muted); }

/* Карточка отзыва во всю ширину сетки. */
@media (min-width: 860px) { .review--wide { grid-column: 1 / -1; } }

/* ── Эксперт ─────────────────────────────────────────────── */

.expert { display: grid; gap: 32px; margin-top: 34px; align-items: start; }
@media (min-width: 860px) { .expert { grid-template-columns: 200px minmax(0,1fr); gap: 44px; } }
.expert-photo { position: relative; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-md); }
.expert-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.45), transparent 45%);
}
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { position: relative; padding-left: 24px; font-size: .95rem; line-height: 1.6; color: var(--text-2); }
.facts li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--text); opacity: .22; }
.facts li::after { content: ''; position: absolute; left: 2px; top: calc(.62em + 1px); width: 3px; height: 3px; border-radius: 50%; background: var(--bg); opacity: .8; }

/* ── Клиенты ─────────────────────────────────────────────── */

.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 44px; margin-top: 34px; }
.logos img {
  height: 30px; width: auto; opacity: .55; filter: grayscale(1);
  transition: opacity var(--dur-state) var(--ease-out-quart), filter var(--dur-state) var(--ease-out-quart);
}
.logos img:hover { opacity: 1; filter: none; }
/* Лок-апы в две строки. При общей высоте 30px каждая строка такого логотипа
   получается по 12px и рядом с однострочными соседями выглядит нечитаемо.
   Сорок пикселей выравнивают их оптически: формально логотип выше остальных,
   на глаз — того же веса. */
.logos img.logo--stacked { height: 40px; }

/* ── Программа ───────────────────────────────────────────── */

.program { display: grid; gap: 0; margin-top: 34px; }
.program-item { padding: 26px 0; border-top: 1px solid var(--border); display: grid; gap: 16px; }
@media (min-width: 860px) { .program-item { grid-template-columns: minmax(0, 20rem) minmax(0,1fr); gap: 40px; } }
.program-item:last-child { border-bottom: 1px solid var(--border); }
.program-item h3 { font-size: 1.15rem; font-weight: 600; }
.program-item p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text-2); }

.chips { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 760px) { .chips { grid-template-columns: 1fr 1fr; } }
.chip-group b { display: block; font-family: 'JetBrains Mono', monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin-bottom: 10px; }
.chip-group div { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 4px 14px; border-radius: var(--r-full); background: var(--surface-alt); font-size: .8rem; color: var(--text-2); }

/* ── Цены ────────────────────────────────────────────────── */

.plans { display: grid; gap: 24px; margin-top: 34px; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 32px 28px; position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.card--sand .plan { background: var(--surface); }
.plan--featured { border: 1.5px solid rgba(217,149,120,.55); box-shadow: 0 4px 16px rgba(217,149,120,.15); }
.plan h3 { font-size: 1.4rem; font-weight: 700; margin-top: 12px; }
.plan .price { font-family: 'Rubik'; font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 4px; }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.plan li::before { content: ''; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--text); opacity: .22; }
.plan li::after { content: ''; position: absolute; left: 2px; top: calc(.58em + 1px); width: 3px; height: 3px; border-radius: 50%; background: var(--bg); opacity: .8; }
.plan .foot { margin-top: auto; padding-top: 26px; }

/* ── FAQ ─────────────────────────────────────────────────── */

.faq { margin-top: 30px; }
details { border-bottom: 1px solid var(--border); }
details summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-family: 'Rubik'; font-weight: 500; font-size: 1.02rem; line-height: 1.45; min-height: 44px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; color: var(--text-3);
  transition: transform var(--dur-layout) var(--ease-in-out), color var(--dur-state) var(--ease-out-quart);
}
details[open] summary::after { content: '−'; color: var(--text); transform: translateY(-50%) scale(1.1); }
details p { margin: 0 0 20px; font-size: .95rem; line-height: 1.65; color: var(--text-2); max-width: 68ch; }
details[open] p { animation: faqIn var(--dur-layout) var(--ease-in-out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Финальный CTA ───────────────────────────────────────── */

.card--ink .facts li { color: rgba(240,238,231,.72); }
.card--ink .facts li::before { background: var(--bg); opacity: .35; }
.card--ink .facts li::after { background: var(--text); opacity: .8; }

/* ── Подвал ──────────────────────────────────────────────── */

footer.site { padding: 8px 0 56px; }
footer.site .inner {
  display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center;
  padding-top: 28px; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-3);
}
/* В подвале логотип может дышать свободнее: рядом с ним только строка
   реквизитов, а не навигация с кнопкой, как в шапке. */
 }
.brand-logo--footer { height: 20px; }
@media (max-width: 619px) { .brand-logo--footer { height: 16px; } }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--text); }

/* ── Появление ───────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(1.5rem); transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); }
.rise.in { opacity: 1; transform: none; }
.enter { opacity: 0; transform: translateY(.75rem); animation: enter var(--dur-enter) var(--ease-out-expo) both; animation-delay: var(--d, 0ms); }
@keyframes enter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .rise { opacity: 1; transform: none; }
  /* Рыба остаётся на месте: без покачивания и без пузырьков. */
  .puffer-stage .bbl-out { opacity: 0; }
}

/* ── Форма заявки ─────────────────────────────────────────
   Модальное окно вместо перехода на сторонний сервис. Разметку
   строит app.js из одного шаблона — в HTML-файлах её нет, поэтому
   форма одинакова на лендинге и на стенде.

   Своих цветов секция не вводит, кроме одного: --lead-error. Терракота
   #d99578 занята под акцент бренда и в роли ошибки читалась бы как
   украшение, поэтому для ошибки взят более тёмный кирпичный тон.
   ───────────────────────────────────────────────────────── */

.lead-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(42, 42, 41, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: leadFade var(--dur-state) var(--ease-out-quart) both;
}
@keyframes leadFade { from { opacity: 0; } to { opacity: 1; } }

.lead-dialog {
  --lead-error: #b3402a;
  position: relative;
  width: 100%; max-width: 30rem;
  max-height: calc(100dvh - 3rem);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(20, 20, 19, .22);
  animation: leadRise var(--dur-layout) var(--ease-out-expo) both;
}
@keyframes leadRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Шапка окна. Отступ справа оставлен под кнопку закрытия, чтобы
   длинный заголовок не заезжал под неё. */
.lead-head { padding: 1.75rem 1.75rem 1rem; padding-right: 3.5rem; }
.lead-head h2 { font-size: 1.4rem; letter-spacing: -.02em; margin-top: .35rem; }
.lead-sub { margin: .6rem 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; }

.lead-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-3); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background var(--dur-state) var(--ease-out-quart), color var(--dur-state) var(--ease-out-quart);
}
.lead-close:hover { background: var(--surface-alt); color: var(--text); }

/* Прокручивается только середина: шапка и кнопка отправки
   остаются на месте, иначе на телефоне кнопка уезжает за экран. */
/* flex: 1 нужен ради полноэкранного режима на телефоне: без него
   середина сжимается по контенту и кнопка отправки повисает в пустоте
   посреди экрана вместо низа. На десктопе окно ограничено max-height и
   растёт по содержимому, поэтому правило там ничего не меняет. */
.lead-body { flex: 1 1 auto; overflow-y: auto; padding: .5rem 1.75rem 1.25rem; }

.lead-field { margin-bottom: 1rem; }
.lead-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }

.lead-field input[type="text"],
.lead-field input[type="email"] {
  width: 100%; padding: 12px 14px;
  font-family: 'Open Sans', sans-serif;
  /* Ровно 16px: на меньшем кегле iOS зумит страницу при фокусе. */
  font-size: 16px; color: var(--text);
  background: var(--bg-warm);
  border: 1.5px solid var(--border-light); border-radius: 12px;
  transition: border-color var(--dur-state) var(--ease-out-quart);
}
.lead-field input::placeholder { color: var(--text-3); opacity: .7; }
.lead-field input:hover { border-color: var(--text-3); }
.lead-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

.lead-field.is-error input { border-color: var(--lead-error); }
.lead-error { display: none; margin: .35rem 0 0; font-size: .85rem; color: var(--lead-error); }
.lead-field.is-error .lead-error { display: block; }

/* Honeypot: люди его не видят и не таббят, боты заполняют. */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0 0; }
.lead-consent input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--cta); }
.lead-consent label { font-size: .82rem; line-height: 1.5; color: var(--text-2); }
.lead-consent a { color: var(--text-2); }
.lead-consent.is-error label { color: var(--lead-error); }

.lead-foot { padding: 1rem 1.75rem 1.75rem; border-top: 1px solid var(--border); }
.lead-foot .btn { width: 100%; justify-content: center; }
.lead-foot .btn[disabled] { opacity: .6; cursor: default; }
.lead-foot .btn[disabled]:hover { background: var(--cta); }
.lead-foot .btn[disabled]:hover::after { animation: none; }

/* Общая ошибка отправки — над кнопкой, чтобы человек увидел её
   до того, как нажмёт второй раз. */
.lead-fail { display: none; margin: 0 0 .85rem; font-size: .88rem; line-height: 1.5; color: var(--lead-error); }
.lead-fail a { color: var(--lead-error); font-weight: 600; }
.lead-dialog.is-failed .lead-fail { display: block; }

/* ── Экран успеха ──────────────────────────────────────── */
/* margin-block: auto центрирует экран по вертикали в полноэкранном
   режиме на телефоне и ничего не меняет в окне по размеру контента. */
.lead-done { display: none; margin-block: auto; padding: 2.75rem 1.75rem; text-align: center; }
.lead-dialog.is-done .lead-head,
.lead-dialog.is-done .lead-body,
.lead-dialog.is-done .lead-foot { display: none; }
.lead-dialog.is-done .lead-done { display: block; }

/* Тот же пузырёк, что и во всём бренде: тёмная точка с бликом. */
.lead-done-mark {
  position: relative; width: 56px; height: 56px; margin: 0 auto 1.25rem;
  border-radius: 50%; background: var(--text);
}
.lead-done-mark::after {
  content: ''; position: absolute; top: 10px; right: 10px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bg); opacity: .5;
}
.lead-done h2 { font-size: 1.4rem; letter-spacing: -.02em; }
.lead-done p { margin: .75rem 0 0; color: var(--text-2); line-height: 1.6; }
.lead-done .btn { margin-top: 1.75rem; }

/* ── Узкий экран ───────────────────────────────────────── */
/* Окно занимает высоту целиком: на 4-дюймовом экране четыре поля,
   согласие и кнопка в центрированную карточку не помещаются. */
@media (max-width: 560px) {
  .lead-overlay { padding: 0; place-items: stretch; }
  .lead-dialog { max-width: none; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .lead-head { padding: 1.5rem 1.25rem .75rem; padding-right: 3.5rem; }
  .lead-body { padding: .5rem 1.25rem 1.25rem; }
  .lead-foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-overlay, .lead-dialog { animation: none; }
}

/* Капча Turnstile. В режиме interaction-only виджет отрисован всегда, но
   невидим, поэтому :empty здесь бесполезен — контейнер не пуст. Класс
   is-shown вешает app.js по колбэку Cloudflare, ровно в тот момент, когда
   виджет действительно показывают. Иначе под согласием висела бы щель. */
.lead-captcha { display: flex; justify-content: center; }
.lead-captcha.is-shown { margin-top: .9rem; }

/* Запасной путь без JavaScript. Модальное окно строит app.js, поэтому при
   отключённом скрипте все кнопки записи вели бы в никуда — блок даёт живую
   альтернативу. Видит его только тот, у кого JS выключен. */
.noscript-note {
  margin: 0; padding: 12px var(--gutter);
  background: var(--surface-muted); color: var(--text-2);
  font-size: .9rem; text-align: center;
}