/* ============================================================
   «Видим» · vidim.digital — дизайн-система «С горы»
   ============================================================ */

/* ---------- Шрифты (self-hosted, вариативные woff2) ---------- */

@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/golos-text-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/golos-text-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* моноширинная гарнитура: deslop-ignore-next-line 34 */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
/* моноширинная гарнитура: deslop-ignore-next-line 34 */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* символы вне стандартных сабсетов: ₽ → ✓ ▍ */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/golos-text-symbols.woff2') format('woff2');unicode-range:U+20BD,U+2192,U+2713,U+258D;}
/* моноширинная гарнитура: deslop-ignore-next-line 34 */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/jetbrains-mono-symbols.woff2') format('woff2');unicode-range:U+20BD,U+2192,U+2713,U+258D;}

/* ---------- Токены ---------- */

:root{
  --sky:#8FBCE3;
  --haze:#DCEAE8;
  --haze-bg:#E9F2F0;
  --light:#F6E9C7;
  --ridge-far:#A9C6BC;
  --ridge:#7FA98D;
  --forest:#256B4A;
  --pine:#16281F;
  --ink:#1B2C23;
  --meadow:#EDF4EA;
  --border:#DFE9DF;
  --muted:#4E6157;
  --data-yellow:#F7D774;
  --data-red:#D64545;
  --font-sans:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    /* объявление гарнитуры: deslop-ignore-next-line 34 */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Шкала скругления: четыре шага. До 21.09.2026 на странице жило двенадцать
     значений, и три пары различались на пиксель (5/6, 11/12, 12/13) — такая
     пара не читается как решение и не держит вложенность, зато следующая
     правка добавляет тринадцатое. `--r-pill` и `50%` — не шаги, а формы. */
  --r-xs:6px;
  --r-s:12px;
  --r-m:16px;
  --r-l:22px;
  --r-pill:999px;
}

/* ---------- База ---------- */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-0.015em;
  line-height:1.16;
  text-wrap:balance;
  margin:0 0 0.6em;
}
p,ul,ol{margin:0 0 1em;}
p,li{max-width:65ch;}
a{color:var(--forest);}
img,svg{max-width:100%;}
/* гарнитура объявлена ради макетов экранов, схемы и показаний отчёта: deslop-ignore-next-line 34 */
.mono{font-family:var(--font-mono);}

:focus-visible{outline:2.5px solid var(--forest);outline-offset:2px;border-radius:var(--r-xs);}

.container{width:min(1120px,100% - 48px);margin-inline:auto;}

section{padding:clamp(64px,9vw,104px) 0;}
section h2{font-size:clamp(26px,3vw,38px);margin-bottom:0.8em;}

/* ---------- Кнопка (единственный стиль CTA) ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--forest);
  color:#FFFFFF;
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  padding:17px 30px;
  border:0;
  border-radius:var(--r-s);
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(37,107,74,.28);
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,107,74,.34);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid var(--pine);outline-offset:3px;}

/* ============================================================
   1. Первый экран — «панорама с прибором»
   ============================================================ */

.hero{padding:14px;}
.hero__frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-l);
  min-height:clamp(660px,94vh,880px);
  /* небо панорамы — изображаемый предмет: deslop-ignore-next-line 06 */
  background:linear-gradient(180deg,#8FBCE3 0%,#B7D6EE 34%,#DCEAE8 66%,#EFF3E2 100%);
}

/* свет утра у горизонта справа */
.hero__light{
  position:absolute;
  right:2%;
  bottom:42%;
  width:640px;
  height:360px;
  z-index:1;
  /* утренний свет над хребтом: deslop-ignore-next-line 06 */
  background:radial-gradient(closest-side,rgba(246,233,199,.85),rgba(246,233,199,0));
  pointer-events:none;
}

/* облака из перекрывающихся блобов */
.cloud{position:absolute;z-index:1;filter:blur(1.5px);pointer-events:none;animation:drift 90s ease-in-out infinite alternate;}
.cloud i{position:absolute;display:block;background:rgba(255,255,255,.88);border-radius:var(--r-pill);}
.cloud--a{top:9%;left:6%;width:250px;height:74px;animation-duration:110s;}
.cloud--a i:nth-child(1){left:6px;top:30px;width:158px;height:34px;}
.cloud--a i:nth-child(2){left:74px;top:8px;width:126px;height:42px;}
.cloud--a i:nth-child(3){left:160px;top:28px;width:84px;height:30px;}
.cloud--b{top:20%;left:60%;width:310px;height:88px;animation-duration:76s;opacity:.9;}
.cloud--b i:nth-child(1){left:0;top:38px;width:180px;height:38px;}
.cloud--b i:nth-child(2){left:80px;top:10px;width:150px;height:48px;}
.cloud--b i:nth-child(3){left:190px;top:34px;width:110px;height:36px;}
.cloud--b i:nth-child(4){left:150px;top:48px;width:120px;height:28px;}
.cloud--c{top:5%;left:42%;width:190px;height:54px;animation-duration:96s;opacity:.8;}
.cloud--c i:nth-child(1){left:0;top:20px;width:130px;height:28px;}
.cloud--c i:nth-child(2){left:64px;top:6px;width:110px;height:32px;}
@keyframes drift{from{transform:translateX(0);}to{transform:translateX(64px);}}

/* панорама */
.hero__vis{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;}
.panorama{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* зерно — только на иллюстрации; слева маска, чтобы не лезло под текст */
.grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  mix-blend-mode:soft-light;
  opacity:.55;
  /* маска зерна, градиент не виден: deslop-ignore-next-line 06 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 52%),linear-gradient(180deg,transparent 0,#000 26%);
  -webkit-mask-composite:source-in;
  /* маска зерна, градиент не виден: deslop-ignore-next-line 06 */
  mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 52%),linear-gradient(180deg,transparent 0,#000 26%);
  mask-composite:intersect;
}

/* контент hero */
.hero__content{
  position:relative;z-index:6;
  max-width:780px;
  padding:clamp(28px,4vw,56px);
  padding-bottom:0;
}
/* тёплая дымка за нижней частью контента — текст читается на любом хребте */
.hero__content::before{
  content:"";
  position:absolute;z-index:-1;
  left:-30px;right:0;top:42%;bottom:-40px;
  /* подложка под текстом ради контраста, а не декор: deslop-ignore-next-line 06 */
  background:radial-gradient(75% 85% at 34% 62%,rgba(246,243,226,.6),rgba(246,243,226,0) 74%);
  filter:blur(8px);
  pointer-events:none;
}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:22px;font-weight:800;letter-spacing:-0.015em;
  margin:0 0 clamp(24px,4vh,44px);
}
.logo__mark{display:inline-flex;width:26px;height:26px;}
.logo__mark svg{width:100%;height:100%;}
.logo__mark--footer{width:0.62em;height:0.62em;}
.hero h1{
  font-size:clamp(32px,4.1vw,59px);
  line-height:1.06;
  max-width:13.5em;
  margin-bottom:0.5em;
}
.hero__sub{font-size:clamp(17px,1.4vw,19px);max-width:34em;margin-bottom:0.9em;}
.hero__cta{margin:30px 0 0;}

/* колонка карточек: ответ + источники */
.hero__cards{
  position:absolute;z-index:8;
  right:clamp(24px,4vw,54px);
  bottom:clamp(64px,13vh,150px);
  width:min(470px,calc(100% - 48px));
  display:flex;flex-direction:column;gap:14px;
}

/* карточка-скрин ответа */
.answer-card{
  margin:0;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  box-shadow:0 26px 52px rgba(22,40,31,.22);
  padding:20px 22px 18px;
}
.answer-card__tag{
  display:block;
  font-size:11.5px;color:var(--muted);
  margin-bottom:5px;
}
.answer-card__q{
  font-size:15px;font-weight:600;
  margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid #EDF2ED;
}
.answer-card__text{font-size:16px;line-height:1.62;margin:0 0 12px;}
.answer-card__text mark{background:var(--data-yellow);color:var(--ink);padding:1px 6px;border-radius:var(--r-xs);}
.answer-card__src{border:1.5px solid var(--data-red);border-radius:var(--r-xs);padding:0 5px;white-space:nowrap;}
.answer-card__note{font-size:13.5px;color:var(--muted);margin:0;}

/* ============================================================
   2. Боли и ситуация
   ============================================================ */

.pains{background:#E9F2F0;}
/* Причинная цепочка, а не три реплики. Реплики стояли с левой линейкой и в
   шахматном порядке — читались как цитаты неизвестно чьи и неизвестно к чему.
   Узел на рейке говорит «это следствие предыдущего», последний узел зелёный:
   на нём цепочка выходит в то, что можно сделать. */
.flow{display:grid;gap:clamp(22px,3vw,30px);}
.flow__step{position:relative;padding-left:30px;}
.flow__step::before{
  content:"";
  position:absolute;left:0;top:0.42em;
  /* точка на линии причин — круг, а не скруглённая карточка: deslop-ignore-next-line 19 */
  width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--ridge);background:var(--haze-bg);
}
/* коннектор дотягивается ровно до узла следующего такта: величина та же, что gap */
.flow__step:not(:last-child)::after{
  content:"";
  position:absolute;left:4.5px;top:calc(0.42em + 15px);
  bottom:calc(-1 * clamp(22px,3vw,30px));
  width:2px;background:var(--ridge-far);
}
.flow__step--out::before{border-color:var(--forest);background:var(--forest);}
.flow__step h3{font-size:19px;margin:0 0 0.3em;}
.flow__step p{margin:0;font-size:16px;line-height:1.55;}

.split{
  display:grid;
  grid-template-columns:minmax(0,62ch) minmax(280px,1fr);
  gap:clamp(36px,5vw,72px);
  align-items:start;
}

.scheme{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:clamp(28px,4vw,40px) 0;
}
.scheme--v{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  margin:8px 0 0;
  width:min(260px,100%);
}
.scheme--v .scheme__node{font-size:15px;padding:15px 20px;justify-content:space-between;}
.scheme--v .scheme__arr{transform:rotate(90deg);align-self:center;margin:0;}
.scheme--v .scheme__note{margin-top:6px;align-self:flex-start;}
.scheme__node{
  font-size:13px;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-s);
  padding:12px 16px;
  display:inline-flex;align-items:center;gap:10px;
}
.scheme__pages{display:inline-flex;gap:3px;}
/* 2px — не шаг шкалы: на прямоугольнике 7×10 px браузер зажмёт 6px до 3,5px,
   и глиф страницы станет лепестком. Форма важнее единообразия. */
.scheme__pages i{width:7px;height:10px;border-radius:2px;background:var(--ridge-far);display:block;}
.scheme__pages i.is-miss{background:transparent;border:2px solid var(--data-red);}
/* Тот же отказ, что у `.stat__to`: `--ridge` на `--haze-bg` даёт 2,31:1 при норме
   3:1 даже для крупного начертания. Связь «было → стало» держится на глифе. */
.scheme__arr{color:var(--muted);font-size:15px;}
.scheme__note{font-size:12px;color:var(--muted);flex-basis:100%;}

.shot{margin:0;}

/* ============================================================
   3. Выгоды
   ============================================================ */

.benefits{background:#FFFFFF;}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
  margin:clamp(52px,7vw,84px) 0 0;
}
.stat{margin:0;}
.benefits .report-page{box-shadow:0 18px 40px rgba(22,40,31,.14);}
.stat__num{
  font-size:clamp(36px,3.5vw,52px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--forest);
  margin:0 0 12px;
}
/* Плитка теперь показывает движение, а не отраслевой факт: владельцу бизнеса
   «49,5 млн человек в месяц» не говорит ничего, «35% → 42% за квартал» говорит.

   Числа и стрелка этой плитки набраны нейтральным `--ink`, а не брендовым
   зелёным: той же грамматикой продукт кодирует УЛУЧШЕНИЕ (`data-tone='up'`
   в кабинете, `.figure-up` в документах), а здесь рост означает, что Яндекс
   всё чаще не доводит человека до сайта. Пришедший с лендинга в кабинет читал
   бы одну картинку в двух противоположных смыслах. Рост оставлен словам
   подписи. Заодно снимается контраст 2,31:1 у стрелки на `--haze-bg`. */
.stat__num--shift{color:var(--ink);}
.stat__was{color:var(--ink);}
.stat__to{color:var(--ink);}
.stat__text{font-size:15px;line-height:1.55;margin:0 0 8px;max-width:30ch;}
.stat__src{font-size:12.5px;color:var(--muted);margin:0;}

.benefit-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  margin-bottom:clamp(40px,6vw,64px);
}
.report-page{
  margin:0;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  box-shadow:0 18px 40px rgba(22,40,31,.1);
  padding:20px 22px;
}
.report-page .mock__stamp{margin-bottom:14px;}
.report-page__label{font-size:11px;color:var(--muted);margin:0 0 8px;letter-spacing:.04em;}
.report-page .mock__lines{margin:0 0 16px;}
.report-page__src{list-style:none;padding:0;margin:0 0 12px;}
.report-page__src li{
  display:flex;align-items:center;gap:10px;
  font-size:12px;padding:6px 0;
  border-bottom:1px solid #EDF2ED;
}
.report-page__src li:last-child{border-bottom:0;}
.report-page .mock__total{margin:0;font-size:12px;}
.benefit-hero__title{
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.12;
  max-width:19em;
  margin-bottom:0.5em;
}
.benefit-line{display:block;}
.benefit-hero__sub{font-size:clamp(18px,1.6vw,21px);font-weight:600;margin-bottom:1.6em;}

.report{
  max-width:560px;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  background:#FFFFFF;
  box-shadow:0 18px 40px rgba(22,40,31,.1);
  padding:20px 22px;
}
.report--hero{
  max-width:none;
  box-shadow:0 26px 52px rgba(22,40,31,.22);
  padding:16px 22px;
}
/* показание отчёта — машинный вывод: deslop-ignore-next-line 34 */
.report__line{font-family:var(--font-mono);font-size:13.5px;margin:0 0 14px;color:var(--ink);}
.report__row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.report__row:last-child{margin-bottom:0;}
/* показание отчёта — машинный вывод: deslop-ignore-next-line 34 */
.report__who{font-family:var(--font-mono);font-size:12px;color:var(--muted);width:76px;flex:none;}
.report__bar{flex:1;height:12px;border-radius:var(--r-pill);background:#EFF4EF;overflow:hidden;display:block;}
.report__fill{display:block;height:100%;border-radius:var(--r-pill);}
.report__fill--you{width:23.3%;background:var(--forest);}
.report__fill--rival{width:80%;background:#8FA398;}

/* ============================================================
   4. Продукт — «поляна»
   ============================================================ */

.product{background:var(--meadow);}
.product__intro{margin-bottom:clamp(32px,5vw,48px);}

/* Тремя карточками в ряд этот блок стоял прямо над тремя тарифами, и средняя
   колонка была обведена так же, как «Старт»: глаз читал его как шапку таблицы
   цен. Строки читаются как шкала «дешевле — мы — дороже», а не как прайс,
   и живут теперь в другой секции, за экран до денег. */
.between{
  display:grid;gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  overflow:hidden;
  margin-bottom:clamp(52px,7vw,84px);
}
.between__row{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:6px clamp(16px,2.5vw,32px);
  background:#FFFFFF;
  padding:18px clamp(18px,2.5vw,26px);
}
.between__row--us{background:#EAF2EC;box-shadow:inset 3px 0 0 var(--forest);}
.between__who{
  display:flex;flex-direction:column;gap:2px;
  margin:0;font-size:17px;font-weight:700;
}
.between__price{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0;}
.between__what{margin:0;max-width:none;font-size:15.5px;line-height:1.5;color:var(--muted);}
.between__row--us .between__who{color:var(--forest);}
.between__row--us .between__what{color:var(--ink);}

/* Сетка 2×2 показывала пять карточек и ни одного порядка: глазу негде было
   прочитать, что за чем идёт. Рейка с номерами читается как последовательность
   в одном направлении, а мокап экрана встаёт справа от своего же шага. */
.track{list-style:none;padding:0;margin:clamp(40px,6vw,64px) 0 0;}
.track__step{
  position:relative;max-width:none;
  padding-left:clamp(50px,5vw,66px);
  padding-bottom:clamp(32px,4.5vw,52px);
}
.track__step:last-child{padding-bottom:0;}
.track__step:not(:last-child)::before{
  content:"";
  position:absolute;left:17px;top:44px;bottom:0;
  width:2px;background:var(--border);
}
.track__num{
  position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;letter-spacing:0;
  color:#FFFFFF;background:var(--forest);
}
.track__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(20px,3vw,44px);
  align-items:start;
}
.track__text h3{font-size:clamp(19px,1.9vw,23px);margin:4px 0 0.5em;}
.track__text > p{font-size:16px;line-height:1.6;margin:0 0 0.7em;}
.track__text > p:last-child{margin-bottom:0;}
.track__extra{color:var(--muted);font-size:15px;}

/* мини-мокапы */
.mock{
  border:1px solid var(--border);
  border-radius:var(--r-s);
  background:#FAFCF9;
  padding:14px;
  margin-top:6px;
}
.mock__input{
  font-size:12px;color:var(--muted);
  border:1.5px solid var(--border);border-radius:var(--r-xs);
  background:#FFFFFF;
  padding:9px 12px;margin-bottom:10px;
}
.mock__chips{display:flex;flex-wrap:wrap;gap:8px;}
.mock__chips span{
  font-size:11.5px;color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--ridge-far);
  border-radius:var(--r-pill);
  padding:5px 11px;
}
.mock__stamp{font-size:11.5px;color:var(--muted);margin:0 0 10px;}
.mock__lines{display:flex;flex-direction:column;gap:8px;}
.mock__row{display:flex;gap:6px;}
.sk{display:block;height:10px;border-radius:var(--r-xs);background:#E3ECE4;}
.sk--mark{background:var(--data-yellow);}
.mock--sources{list-style:none;padding:14px;margin:6px 0 0;}
.mock--sources li{
  display:flex;align-items:center;gap:10px;
  font-size:12px;padding:6px 0;
  border-bottom:1px solid #EDF2ED;
}
.mock--sources li:last-child{border-bottom:0;}
/* точка-маркер — круг: deslop-ignore-next-line 19 */
.pin{width:11px;height:11px;border-radius:50%;flex:none;}
.pin--miss{border:2.5px solid var(--data-red);background:#FFFFFF;}
.pin--hit{background:var(--forest);}
.mock__total{color:var(--muted);}
.mock--plan{list-style:none;padding:14px;margin:6px 0 0;}
.mock--plan li{
  display:flex;align-items:center;gap:10px;
  font-size:12px;padding:6px 0;
  border-bottom:1px solid #EDF2ED;
}
.mock--plan li:last-child{border-bottom:0;}
.mock__pri{
  flex:none;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:var(--forest);
  border:1.5px solid var(--ridge-far);border-radius:var(--r-xs);
}

.product__more{font-size:clamp(22px,2.4vw,28px);margin-bottom:1em;}
.features{
  padding-left:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  /* Без этого каждая карточка тянется до высоты соседа: у «Обзор от ИИ — это
     Алиса?» под тремя строками текста оставалось около 440 px пустого поля,
     а блок «Что мы обещаем» из трёх карточек оставлял пустую ячейку рядом
     с гарантией. */
  align-items:start;
  margin:0;
}
.features li{
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:24px 26px;
  margin:0;max-width:none;
}
.features h4{font-size:17.5px;margin-bottom:0.35em;}
.features p{font-size:15px;line-height:1.6;margin:0;}

/* ============================================================
   5. Оффер и CTA
   ============================================================ */

.offer--totals{background:#E2ECDF;}
.offer--cta{background:#D6E3D3;}
.plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  align-items:stretch;
  margin-bottom:clamp(32px,4vw,44px);
}
.plan{
  display:flex;flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r-l);
  padding:28px 28px 26px;
  background:#FFFFFF;
  box-shadow:0 18px 40px rgba(22,40,31,.1);
}
.plan--hot{
  border:2px solid var(--forest);
  background:linear-gradient(rgba(37,107,74,.04),rgba(37,107,74,.04)),#FFFFFF;
}
.plan__name{font-size:21px;margin-bottom:0.7em;}
.plan__price{font-weight:600;font-size:19px;color:var(--forest);letter-spacing:0;white-space:nowrap;}
.plan__list{
  list-style:none;padding:0;margin:0 0 0.8em;
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.plan__list li{
  position:relative;
  padding:5px 0 5px 22px;
  border-bottom:1px solid #EDF2ED;
  max-width:none;
}
.plan__list li:last-child{border-bottom:0;}
.plan__list li::before{
  content:"✓";
  position:absolute;left:2px;top:5px;
  color:var(--forest);font-weight:600;
}
.plan__why{font-size:14.5px;color:var(--muted);margin:auto 0 0;}
/* Оговорка `DISCLAIMERS §3` под таблицей тарифов и набрана как сноска: она
   обязана быть прочитанной до того, как человек нажмёт кнопку, но продаёт
   не она. */
.plans__note{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 clamp(32px,4vw,44px);}
/* То, что НЕ входит в подписку, стоит вне списка и без галочки: галочка —
   единственный знак «входит», и у строки «размещения — отдельно» она спорила
   с текстом самой строки. */
.plan__extra{font-size:13px;color:var(--muted);margin:0 0 0.8em;line-height:1.5;}

.offer__cta{margin-top:clamp(48px,6vw,72px);}
.offer__cta h2{margin-bottom:0.7em;}
.offer__cta h3{font-size:clamp(20px,2vw,24px);margin-top:1.6em;}
.after{padding-left:0;list-style:none;counter-reset:aft;}
.after li{
  position:relative;
  counter-increment:aft;
  padding-left:40px;
  margin-bottom:0.8em;
}
.after li::before{
  content:counter(aft);
  position:absolute;left:0;top:0.1em;
  font-size:14px;font-weight:600;
  color:var(--forest);
  width:26px;height:26px;
  border:1.5px solid var(--ridge-far);border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
}
.product__cta{margin:clamp(36px,5vw,56px) 0 0;}

/* Оговорки обязаны быть на лендинге (docs/DISCLAIMERS.md §1, §7, §8), но триста
   слов мелким кеглем между человеком и кнопкой — это способ выполнить требование
   и потерять читателя. Раскрытие оставляет их на странице и не в тексте. */

/* Разговор с человеком — не вход в продукт, а второе предложение для тех, кому
   он нужен. Поэтому тише кабинета и ниже него. */
.second-track{
  margin-top:clamp(28px,3.5vw,44px);
}
.second-track h3{font-size:clamp(20px,2vw,24px);margin-bottom:0.4em;}
.second-track > p{max-width:60ch;color:var(--muted);}
.second-track .form{max-width:min(100%,720px);}

/* ---------- Форма ---------- */

.form{
  margin-top:clamp(40px,5vw,56px);
  background:#FFFFFF;
  border-radius:var(--r-l);
  padding:clamp(24px,4vw,44px);
}
.form__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;
  margin-bottom:26px;
}
.field label{
  display:block;
  font-size:15px;font-weight:600;
  margin-bottom:7px;
}
.field__hint{font-weight:400;color:var(--muted);font-size:13.5px;margin-left:4px;}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"]{
  width:100%;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--ink);
  background:#FFFFFF;
  border:1.5px solid #C9D8CC;
  border-radius:var(--r-s);
  padding:13px 14px;
}
.field input:focus-visible{outline:2.5px solid var(--forest);outline-offset:1px;border-color:var(--forest);}
.field input[aria-invalid="true"]{border-color:#B03A3A;}
.field__error{color:#B03A3A;font-size:13.5px;margin:6px 0 0;}

.choices{
  display:block;
  border:0;padding:0;margin:0 0 26px;
}
.choices legend{
  font-size:15px;font-weight:600;
  padding:0;margin-bottom:10px;
}
.choices .chip{margin:0 8px 8px 0;}
.chip{
  display:inline-flex;align-items:flex-start;gap:9px;
  border:1.5px solid var(--border);
  border-radius:var(--r-s);
  background:#FFFFFF;
  padding:10px 14px;
  font-size:15px;
  cursor:pointer;
  vertical-align:top;
}
.chip{position:relative;}
.chip input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;
}
.chip:has(input:checked){border-color:var(--forest);background:rgba(37,107,74,.06);}
.chip:has(input:focus-visible){outline:2.5px solid var(--forest);outline-offset:2px;}

.field--consent{margin-bottom:8px;}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:400;cursor:pointer;margin-bottom:8px;}
.consent input{accent-color:var(--forest);margin-top:3px;flex:none;}

.form__status{
  color:#B03A3A;
  background:rgba(176,58,58,.07);
  border:1px solid rgba(176,58,58,.25);
  border-radius:var(--r-s);
  padding:12px 16px;
  font-size:15px;
}
.form__submit{margin:22px 0 0;}
.form-success{
  font-size:clamp(19px,2vw,23px);
  font-weight:600;
  margin:0;
  max-width:26em;
}

/* гребни-переходы между светлыми и тёмными экранами — спуск продолжается */
.ridge-divider{line-height:0;margin-bottom:-1px;background:var(--meadow);}
.ridge-divider--night{background:#D6E3D3;margin-top:-1px;}
.ridge-divider svg{display:block;width:100%;height:clamp(44px,6vw,84px);}

/* ============================================================
   6. Футер — «ночной протокол» (тёмный экран №2)
   ============================================================ */

.footer{
  position:relative;
  background:#101C15;
  min-height:320px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.footer__dots{position:absolute;inset:0;width:100%;height:100%;}
.footer__inner{
  position:relative;
  width:min(1120px,100% - 48px);
  margin:0 auto;
  padding:64px 0 28px;
}
.footer__brand{
  display:inline-flex;align-items:center;gap:16px;
  font-size:clamp(40px,6vw,64px);
  font-weight:800;letter-spacing:-0.015em;
  color:#DCE8DE;
  margin:0 0 10px;
}
.footer__line{
  margin:0;
  max-width:none;
  font-size:13.5px;
  line-height:1.9;
  color:#8FA697;
}
.footer__line a{color:#7FBF9B;text-decoration:none;border-bottom:1px solid rgba(127,191,155,.35);}
.footer__line a:hover{border-bottom-color:#7FBF9B;}
.footer__line a:focus-visible{outline-color:#7FBF9B;}

/* мобильная закреплённая кнопка */
.sticky-cta{display:none;}

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width:1180px){
  .hero__content{max-width:600px;}
  .hero__cards{width:min(410px,calc(100% - 48px));}
}

@media (max-width:1020px) and (min-width:861px){
  .hero h1{font-size:clamp(30px,3.4vw,40px);}
  .hero__content{max-width:520px;}
  .hero__cards{width:360px;}
  .answer-card__text{font-size:14.5px;}
}

@media (max-width:860px){
  .hero{padding:10px;}
  .hero__frame{min-height:0;padding-bottom:225px;border-radius:var(--r-l);}
  .hero__vis{height:205px;}
  .hero__light{width:420px;height:240px;bottom:60px;}
  .hero__content{max-width:none;padding-bottom:0;}
  .hero__cta{margin:24px 0 0;}
  .hero__cards{
    position:relative;z-index:6;
    right:auto;bottom:auto;
    width:auto;
    margin:26px clamp(20px,4vw,40px) 0;
  }

  .split{grid-template-columns:1fr;}
  .scheme--v{margin-inline:auto;}
  .scheme--v .scheme__note{align-self:center;text-align:center;}
  .benefit-hero{grid-template-columns:1fr;}
  .track__body{grid-template-columns:1fr;}
  .between__row{grid-template-columns:1fr;}
  .shot--aside{display:none;}

  .sticky-cta:not([hidden]){
    display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    border-top:1px solid var(--border);
  }
  .sticky-cta .btn{width:100%;}
  .stats{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .form__grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .hero__frame{padding-bottom:190px;}
  .hero__vis{height:175px;}
  .hero__cta .btn,.form__submit .btn{width:100%;}
  .mock--sources li,.mock--plan li{font-size:13px;}
  .mock__chips span,.mock__stamp,.answer-card__tag{font-size:12.5px;}
  .scheme__note{font-size:13px;}
  .chip{padding:9px 13px;font-size:14px;}
  .choices .chip{margin:0 6px 6px 0;}
}

/* ============================================================
   Reduced motion — глушим всё
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cloud{animation:none !important;}
  .btn{transition:none;}
  .btn:hover{transform:none;}
}

/* ============ ЮРИДИЧЕСКИЕ СТРАНИЦЫ ============ */
.legal{max-width:760px;margin:0 auto;padding:56px 20px 80px;background:#fff;}
.legal h1{font-size:clamp(24px,4vw,32px);line-height:1.25;margin:0 0 8px;color:var(--pine);}
.legal .legal__updated{font-size:13px;color:var(--muted);margin:0 0 36px;}
.legal h2{font-size:19px;margin:36px 0 12px;color:var(--pine);}
.legal p,.legal li{font-size:15.5px;line-height:1.65;color:var(--ink);}
.legal p{margin:0 0 12px;}
.legal ul,.legal ol{margin:0 0 12px;padding-left:22px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--forest);}
.legal .legal__req{background:var(--meadow);border:1px solid var(--border);border-radius:var(--r-m);padding:18px 20px;font-size:14px;line-height:1.7;margin:24px 0;}
.legal .legal__back{display:inline-block;margin-bottom:28px;font-size:13.5px;color:var(--forest);text-decoration:none;}
/* подчёркивание ссылки — ровно то, что правило и советует: deslop-ignore-next-line 09 */
.legal .legal__back:hover{text-decoration:underline;}

/* FAQ: та же сетка, что у фич, но без иконок и с более крупным вопросом */
.faq{margin-top:clamp(20px,3vw,28px);}
.faq h4{font-size:18px;line-height:1.35;margin-bottom:0.45em;}
.faq p{font-size:15.5px;}