/* ==========================================================================
   Гав VPN — вариант V2 «Две дороги».
   Композиция держится на одной лаймовой линии-оси: она приходит из первого
   экрана, раздваивается на «через нас» и «напрямую», снова сходится и дальше
   служит осью, к которой приезжают все блоки.
   Правит только этот вариант. tokens.css и base.css не трогаются.
   ========================================================================== */

body {
  /* Положение оси внутри содержимого .wrap. По центру на всех размерах:
     первый экран строит развилку симметрично, и она обязана совпасть с осью. */
  --axis-x: 50%;
  --axis-w: 2px;
}

/* --- Ось: один настоящий элемент на всю оставшуюся страницу --------------- */

.rail { position: relative; }
/* overflow-x: clip — приезжающие сбоку блоки (translateX ±40px) не должны
   раздвигать документ, пока не встали на место. Скролл-контейнер не создаётся. */
.rail > .section,
.hero,
.site-foot { position: relative; z-index: 1; overflow-x: clip; }

.axis {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.axis__rail {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  margin-inline: auto;
}
.axis__inner { position: absolute; inset: 0 var(--gutter); }

.axis__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--axis-x);
  width: var(--axis-w);
  margin-left: calc(var(--axis-w) / -2);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--lime) 75%, transparent) 0%,
    color-mix(in oklab, var(--lime) 48%, transparent) 14%,
    color-mix(in oklab, var(--lime) 48%, transparent) 88%,
    transparent 100%);
}

/* Линия прошивается сверху вниз: базовый wipe идёт слева направо, здесь ось
   вертикальная — растёт от начала, то есть сверху. */
.axis__line.reveal[data-reveal='wipe'] { clip-path: inset(0 0 100% 0); }
.axis__line.reveal[data-reveal='wipe'].is-in { clip-path: inset(0 0 0 0); }
/* Без скрипта и при выключенном движении линия видна целиком. */
.no-js .axis__line.reveal[data-reveal='wipe'],
.motion-off .axis__line.reveal[data-reveal='wipe'] { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .axis__line.reveal[data-reveal='wipe'] { clip-path: none; }
}

/* Короткий яркий импульс бежит по линии на --sp от скраба секции. */
.axis__pulse {
  position: absolute;
  left: var(--axis-x);
  top: calc(var(--sp, 0) * 100%);
  width: 6px;
  height: 130px;
  margin-left: -3px;
  translate: 0 -50%;
  background: linear-gradient(180deg, transparent, var(--lime-hi) 46%, var(--lime) 54%, transparent);
  filter: blur(1px);
  opacity: 0.9;
}
.no-js .axis__pulse { display: none; }

/* Тёмный отрезок оси там, где её перекрывает цветная плита: дорога входит
   в плиту и выходит из неё, под текстом линии нет. */
.axis--seg { z-index: -1; }
.axis__line--dark {
  background: linear-gradient(180deg,
    #0a0a0a 0 clamp(48px, 9vw, 96px),
    transparent clamp(48px, 9vw, 96px) calc(100% - clamp(48px, 9vw, 96px)),
    #0a0a0a calc(100% - clamp(48px, 9vw, 96px)) 100%);
}

/* Блоки, которые обязаны перекрыть линию, а не быть ею перечёркнутыми. */
.on-ink { background: var(--ink); }

/* --- Указатели на оси -----------------------------------------------------
   Перегон между блоками сжат до --s10 на пару, и на каждом стыке линия
   получает смысл: шеверон показывает направление, ромб отмечает узел,
   куда приходит следующий блок. Без них голая линия в черноте читалась
   как индикатор загрузки. */

.rail > .section::before,
.rail > .section::after {
  content: '';
  position: absolute;
  left: var(--axis-x);
  z-index: 1;
  pointer-events: none;
}
.rail > .section::before {
  top: -24px;
  width: 9px;
  height: 9px;
  translate: -50% 0;
  rotate: 45deg;
  border-right: var(--bw-strong) solid color-mix(in oklab, var(--lime) 70%, transparent);
  border-bottom: var(--bw-strong) solid color-mix(in oklab, var(--lime) 70%, transparent);
}
.rail > .section::after {
  top: 0;
  width: 11px;
  height: 11px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--lime);
  box-shadow: 0 0 0 5px var(--ink);
}
/* На цветной плите узел меняется местами с полем: тёмный ромб в лаймовом. */
.section--honest::after { background: #0a0a0a; box-shadow: 0 0 0 4px var(--lime); }


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

.hero {
  position: relative;
  /* Скраб shell.js даёт --sp; стартовое значение зависит от высоты экрана:
     на телефоне первый экран длиннее, и отсчёт начинается около 0.34, на
     широком — около 0.44. Отсюда два смещения, иначе пояснения на телефоне
     договаривают до того, как войдут в кадр. --sw — честный ход 0 → 1.
     Без JS и при выключенном движении --sp = 1: пояснения видны сразу. */
  --sw: clamp(0, calc((var(--sp, 1) - 0.52) * 2.4), 1);
  /* Верхнее поле смотрит и на ширину, и на высоту окна: на ноутбуке 1366 × 768
     каждый лишний пиксель сверху выталкивал нижний ряд ярлыков за сгиб. */
  padding-block: clamp(16px, min(3vw, 4svh), 40px) 0;
}
/* Твик «движение выключено» скраб не останавливает — shell.js всё равно
   пишет --sp прямо в стиль элемента, и подстраховка base.css по классу
   проигрывает инлайну. Поэтому ход пояснений гасим своей переменной. */
.motion-off .hero { --sw: 1; }
/* minmax(0, 1fr): без него колонка растягивается по min-content кнопки
   с white-space: nowrap и уносит весь первый экран за край на 360 px. */
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

.hero__word {
  line-height: var(--lh-mega);
  display: grid;
  justify-items: start;
}
.hero__word span { display: block; }
.hero__word span:last-child { color: var(--lime); }

.hero__lead { max-width: 46ch; }

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
}
.hero__link { color: var(--paper-dim); }
.hero__stamp { align-self: center; }
/* Сноска про пробный доступ переехала к шагам подключения: в первом экране
   она съедала место, из-за которого развилка уходила за линию сгиба. */
.setup__fine { max-width: 58ch; margin-top: var(--s5); }

@media (min-width: 1024px) {
  .hero { --sw: clamp(0, calc((var(--sp, 1) - 0.44) * 2.4), 1); }
  .hero__in {
    /* Проценты, а не пиксели: центр схемы обязан попасть ровно в 77 %
       полосы контента — туда же приходит изгиб, сводящий линию на ось. */
    grid-template-columns: 50% minmax(0, 1fr);
    column-gap: 4%;
    row-gap: var(--s5);
    align-items: start;
  }
  /* Селекторы с родителем намеренно: базовые правила схемы и пояснений
     идут ниже по файлу, и с одинаковым весом победили бы они — схема
     сжималась в колонку по содержимому вместо своей половины экрана. */
  .hero__in > .hero__word { grid-column: 1 / -1; grid-row: 1; }
  .hero__in > .hero__lead { grid-column: 1; grid-row: 2; }
  .hero__in > .hero__acts { grid-column: 1; grid-row: 3; align-content: start; }
  .hero__in > .hints  { grid-column: 1; grid-row: 4; max-width: 48ch; padding-block: 0; }
  .hero__in > .schema { grid-column: 2; grid-row: 2 / 5; max-width: none; margin: 0; }
  .hero__in > .joint  { grid-column: 1 / -1; grid-row: 5; }
}

/* --- Развилка ------------------------------------------------------------- */

.schema {
  position: relative;
  z-index: 1;
  /* Уже полосы контента: на широком экране дороги не должны разъезжаться
     по краям — развилка читается только когда обе ветви в поле зрения. */
  max-width: 1000px;
  margin-inline: auto;
}

.schema__split {
  position: relative;
  /* Выше самого Гавчика: над его головой должен остаться виден стебель
     линии и узел ветвления, иначе развилка читается как «дог на фоне». */
  min-height: clamp(300px, 74vw, 470px);
  display: grid;
  place-items: end center;
}
/* Развилка прошивается сверху вниз, а не слева направо: линия приходит
   из-под слова и растекается по двум дорогам. */
.schema__split.reveal[data-reveal='wipe'] {
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 0% no-repeat;
  mask: linear-gradient(#000, #000) 0 0 / 100% 0% no-repeat;
}
.schema__split.reveal[data-reveal='wipe'].is-in {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* Без скрипта, при выключенном движении и при отказе от анимации развилка
   видна целиком: своя маска перебивает страховку base.css по весу, и без
   этих трёх строк первый экран у человека без JS оставался пустым. */
.no-js .schema__split.reveal[data-reveal='wipe'],
.motion-off .schema__split.reveal[data-reveal='wipe'] {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .schema__split.reveal[data-reveal='wipe'] {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.schema__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--line-strong);
}
.schema__svg--flip { transform: scaleY(-1); }
.schema__via { color: var(--lime); stroke: currentColor; }
.schema__direct { color: color-mix(in oklab, var(--paper) 38%, transparent); stroke: currentColor; }
.schema__stem { color: var(--lime); stroke: currentColor; }

/* Узел разветвления — ромб на оси, ровно там, где расходятся дороги. */
.schema__knot {
  position: absolute;
  left: var(--axis-x);
  top: 20.8%;   /* точка ветвления в viewBox схемы: y = 25 из 120 */
  width: 13px;
  height: 13px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--lime);
  box-shadow: 0 0 0 5px var(--ink);
}

.schema__dog {
  position: relative;
  z-index: 2;
  width: clamp(150px, 44vw, 250px);
  margin-bottom: -2px;
}

.schema__merge { position: relative; height: clamp(72px, 16vw, 120px); }

/* --- Две дороги: ярлыки по сторонам оси ----------------------------------- */

.roads {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s4);
  padding-block: var(--s5) var(--s6);
}
/* Вертикальные плечи дорог — продолжение ветвей развилки. */
.roads::before,
.roads::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--axis-w);
}
.roads::before {
  left: 6%;
  background: color-mix(in oklab, var(--lime) 55%, transparent);
}
.roads::after {
  right: 6%;
  background: repeating-linear-gradient(180deg,
    color-mix(in oklab, var(--paper) 34%, transparent) 0 7px,
    transparent 7px 13px);
}

.road { display: grid; gap: var(--s3); align-content: start; }
.road--via { padding-left: calc(6% + var(--s4)); }
.road--direct { padding-right: calc(6% + var(--s4)); text-align: right; }

.road__head {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.road--via .road__head { color: var(--lime); }
.road--direct .road__head { color: var(--paper-dim); justify-self: end; }

.tags { display: grid; gap: var(--s2); justify-items: start; }
.road--direct .tags { justify-items: end; }

.tag {
  display: inline-block;
  padding: 6px clamp(6px, 2.4vw, 12px);
  border: var(--bw) solid var(--line-strong);
  font-family: var(--f-ui);
  font-size: calc(clamp(0.5625rem, 2.5vw, 0.6875rem) * var(--kui));
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  background: var(--ink);
  white-space: nowrap;
}
.road--via .tag { border-color: color-mix(in oklab, var(--lime) 45%, transparent); color: var(--paper); }

/* Ярлыки собираются на месте, а не въезжают сбоку: на длинном въезде группа
   ловилась полусобранной и плашки заходили за рамку. Вся группа выходит
   меньше чем за 300 мс — шаг задаёт data-stagger в разметке. */
.tag.reveal,
.tile.reveal,
.road__head.reveal { transition-duration: 180ms; }

/* Печать на слиянии: наклонённый ярлык там, где дороги сходятся обратно. */
.fork__stamp {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  text-align: center;
}
.fork__stamp .stamp { color: var(--lime); border-color: var(--lime); }

/* --- Пояснения к схеме: набегают по ходу первого экрана ------------------- */

.hints {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s4) var(--s2);
}
.hint {
  /* Своя доля общего хода: первое пояснение выходит почти сразу, каждое
     следующее — на треть прокрутки позже. */
  --o: clamp(0, calc((var(--sw, 1) - var(--i, 0) * 0.3 - 0.04) * 9), 1);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--paper-dim);
  opacity: var(--o);
  translate: 0 calc((1 - var(--o)) * 16px);
}
.hint:nth-child(2) { --i: 1; }
.hint:nth-child(3) { --i: 2; }

.hint__mark { margin-top: 0.42em; height: 10px; }
.hint__mark--via { background: var(--lime); }
.hint__mark--direct {
  background: repeating-linear-gradient(90deg,
    color-mix(in oklab, var(--paper) 40%, transparent) 0 6px, transparent 6px 11px);
}
.hint__mark--knot {
  width: 10px;
  height: 10px;
  margin-inline: 6px;
  rotate: 45deg;
  background: var(--lime);
}

/* --- Стык: обе дороги сошлись, дальше идёт одна ось ----------------------- */

.joint {
  position: relative;
  height: clamp(56px, 9vw, 104px);
  pointer-events: none;
}
.joint__line {
  position: absolute;
  inset: 0 auto 0 var(--axis-x);
  width: var(--axis-w);
  margin-left: calc(var(--axis-w) / -2);
  background: color-mix(in oklab, var(--lime) 62%, transparent);
}
.joint__bend { display: none; }

@media (min-width: 900px) {
  .roads {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5) var(--s9);
    padding-block: var(--s6) var(--s7);
  }
  /* Плечи остаются на 6 % — там же, где кончаются ветви развилки. */
  .road--via { padding-left: calc(6% + var(--s5)); }
  .road--direct { padding-right: calc(6% + var(--s5)); }
  .tags { grid-auto-flow: row; }
}

@media (min-width: 1024px) {
  /* Схема встала в правую колонку — её размеры ужимаются, чтобы раздвоение
     и обе дороги целиком попадали в первый экран. Высоту развилки держит
     и ширина колонки, и высота окна: на ноутбуке 1280 × 800 без второго
     ограничения нижний ряд ярлыков уходил за сгиб.
     Гавчик считается от той же высоты: доля 0.49 оставляет над его головой
     стебель линии с узлом ветвления (узел сидит на 20.8 % высоты). */
  .schema { --fork-h: clamp(236px, min(23vw, 32svh), 340px); }
  .schema__split { min-height: var(--fork-h); }
  .schema__dog { width: calc(var(--fork-h) * 0.49); }
  .schema__merge { height: clamp(56px, 5vw, 80px); }
  .roads {
    gap: var(--s2) var(--s4);
    padding-block: var(--s3);
  }
  .road--via { padding-left: calc(6% + var(--s3)); }
  .road--direct { padding-right: calc(6% + var(--s3)); }

  /* Схема стоит центром на 77 % полосы контента, ось страницы — на 50 %:
     линия сводится изгибом, а не обрывается. */
  .joint__line { display: none; }
  .joint__bend {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: color-mix(in oklab, var(--lime) 62%, transparent);
  }
}

/* --- 2. Что открывается: плотная плитка, самая частая сетка страницы ------ */

.section--open { padding-block: var(--s8); }

.open__head {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding-block: var(--s4) var(--s7);
  display: grid;
  gap: var(--s5);
}
.open__head .display { max-width: 14ch; }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bw-strong);
  background: var(--line);   /* швы сетки: линия оси уходит под плитки */
  border: var(--bw-strong) solid var(--line);
}
.tile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 76px;
  padding: var(--s4);
  background: var(--raise);
  font-family: var(--f-ui);
  font-size: calc(clamp(0.75rem, 3.2vw, 0.875rem) * var(--ktext));
  letter-spacing: 0.04em;
  color: var(--paper);
}
.tile__bolt { flex: none; color: var(--pink); display: inline-flex; }

.bypass {
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--sink);
  border-left: var(--bw) solid var(--line-strong);
  display: grid;
  gap: var(--s4);
}
.bypass__sign { color: var(--paper-dim); }
.tags--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.tags--row .tag { background: transparent; }

@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .open__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    align-items: end;
    gap: var(--s8);
  }
  .bypass { grid-template-columns: auto 1fr; align-items: center; gap: var(--s6); }
}

/* --- 3. Тарифы: карточки с лаймовым углом, одна залита целиком ------------ */

.section--plans { padding-block: var(--s8); }

.plans__head {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding-block: var(--s3) var(--s7);
  display: grid;
  gap: var(--s5);
  justify-items: start;
}
.plans__head .display { max-width: 12ch; }
.plans__stamp { color: var(--lime); border-color: var(--lime); }

.plans {
  display: grid;
  gap: var(--s4);
}

.plan {
  position: relative;
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--raise);
  border: var(--bw) solid var(--line-strong);
  overflow: hidden;
}
/* Лаймовый угол — срез в правом верхнем углу карточки. */
.plan::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: var(--lime);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.plan__term {
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}
.plan__price {
  font-family: var(--f-ui);
  font-size: calc(clamp(1.1rem, 4.4vw, 1.6rem) * var(--khead));
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.plan__lim { font-size: var(--t-sm); color: var(--paper-dim); }
.plan .btn { margin-top: var(--s3); }

.ph {
  font-family: var(--f-mono);
  font-size: inherit;
  color: var(--lime);
}

.plan--fill {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0a0a;
}
.plan--fill::before { background: #0a0a0a; }
.plan--fill .plan__term,
.plan--fill .plan__lim { color: #223000; }
.plan--fill .ph { color: #0a0a0a; }
.plan__flag {
  justify-self: start;
  padding: 4px var(--s3);
  background: #0a0a0a;
  color: var(--lime);
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  rotate: -1.5deg;
}
.btn--dark { --btn-bg: #0a0a0a; --btn-fg: var(--lime); }
.plan--fill :focus-visible { outline-color: #0a0a0a; }

.plans__foot {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s5);
  justify-items: center;
  text-align: center;
}
.plans__dog { width: clamp(120px, 34vw, 190px); }

@media (min-width: 560px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}
@media (min-width: 1000px) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plans__head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; }
  .plans__head .display { grid-column: 1; grid-row: 1; }
  .plans__stamp { grid-column: 1; grid-row: 2; }
  .plans__head .lead { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .plans__foot {
    grid-template-columns: auto minmax(0, 30rem);
    justify-content: start;   /* без этого колонка auto съедает всю свободу */
    justify-items: start;
    text-align: left;
    align-items: end;
    gap: var(--s7);
  }
}

/* --- 4. Подключение: шаги нанизаны на ту же линию ------------------------- */

.section--setup { padding-block: var(--s8); }

.setup__head {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding-block: var(--s3) var(--s6);
}
.setup__head .display { max-width: 13ch; }

.steps { display: grid; gap: var(--s6); }

.step {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--raise);
  border: var(--bw) solid var(--line);
  display: grid;
  gap: var(--s3);
}
/* Узел на оси: сверху по центру, ровно там, где проходит линия.
   z-index — чтобы подложка заголовка секции не срезала верх ромба. */
.step::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--ink);
}
/* Отвод и узел висят снаружи карточки шага, а `.reveal.is-in` из base.css
   ставит clip-path: inset(0) — он обрезал их по рамке, и шаг оставался
   не подключённым к оси. Ход появления от снятия отсечки не страдает. */
.step.is-in { clip-path: none; }

.step__no {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: calc(1.5rem * var(--khead));
  line-height: 1;
  color: var(--lime);
  letter-spacing: -0.04em;
}
.step__title { font-family: var(--f-text); font-weight: 600; }
.step__text { color: var(--paper-dim); max-width: 46ch; }

.setup__stamp { margin-top: var(--s5); }
.setup__stamp .stamp { color: var(--lime); border-color: var(--lime); }

.setup__dog {
  width: clamp(140px, 42vw, 210px);
  margin-top: var(--s7);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .setup { position: relative; }
  .setup__head { background: none; max-width: 50%; padding-right: var(--s7); }
  .steps { gap: var(--s5); }
  .step {
    margin-left: calc(50% + 56px);
    padding: var(--s5) var(--s6);
  }
  /* Отвод от оси к узлу шага. */
  .step::before {
    content: '';
    position: absolute;
    top: 34px;
    left: -56px;
    width: 56px;
    height: var(--axis-w);
    background: color-mix(in oklab, var(--lime) 75%, transparent);
  }
  .step::after { top: 34px; left: -56px; translate: -50% -50%; }
  .setup__stamp,
  .setup__fine { margin-left: calc(50% + 56px); }
  .setup__dog {
    position: absolute;
    left: 4%;
    bottom: 0;
    width: clamp(160px, 22vw, 250px);
    margin: 0;
  }
}

/* --- 5. Устройства: лента-перекрёсток поперёк оси ------------------------- */

.section--devices { padding-block: var(--s8); }

.devices__title { max-width: 16ch; margin-bottom: var(--s7); }

.devices {
  display: grid;
  background: var(--ink);
  border-block: var(--bw) solid var(--line-strong);
}
.dev {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s2);
}
.dev + .dev { border-top: var(--bw) solid var(--line); }
.dev__pic { width: 64px; height: 48px; color: var(--lime); }
.dev__name { font-weight: 600; }
.dev__list {
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  grid-column: 2;
}

.devices__foot {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s5);
  align-items: end;
}
.devices__dog { width: clamp(150px, 46vw, 240px); }

@media (min-width: 760px) {
  .devices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev { grid-template-columns: minmax(0, 1fr); padding: var(--s6) var(--s5); gap: var(--s3); }
  .dev + .dev { border-top: 0; border-left: var(--bw) solid var(--line); }
  .dev__list { grid-column: 1; }
  /* justify-content: start — иначе колонка auto растягивается на всю свободу
     и между Гавчиком и сноской повисает пустой экран. */
  .devices__foot {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: start;
    gap: var(--s8);
  }
}

/* --- 6. Приватность: самый тихий экран, воздух вместо плотности ----------- */

.section--hush { padding-block: clamp(64px, 8vw, 96px); }

.hush {
  display: grid;
  gap: var(--s6);
  justify-items: start;
}
.hush__sign { position: relative; z-index: 1; }
.hush__line {
  position: relative;
  z-index: 1;
  background: var(--ink);
  /* Кегль общий: Onest на четверть уже прежней гарнитуры, и своя поправка
     первому и тихому экранам больше не нужна. */
  max-width: min(15ch, 100%);
  padding-block: var(--s2);
}
.hush__dog { width: clamp(140px, 40vw, 230px); justify-self: center; }

@media (min-width: 900px) {
  .hush {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s9);
  }
  .hush__sign { grid-column: 1; }
  .hush__line { grid-column: 1; background: none; }
  .hush__dog { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}

/* --- 7. Честно: лаймовая плита во всю ширину, текст чёрным ---------------- */

.plate {
  background: var(--lime);
  color: #0a0a0a;
  padding-block: var(--s9) var(--s8);
}
.plate :focus-visible { outline-color: #0a0a0a; }
.plate ::selection { background: #0a0a0a; color: var(--lime); }

.honest__title { max-width: 14ch; margin-bottom: var(--s8); }

.honest { display: grid; gap: var(--s6); }
.honest__item {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: var(--bw-strong) solid #0a0a0a;
  max-width: 44ch;
}
.honest__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: calc(clamp(1.05rem, 3.6vw, 1.25rem) * var(--khead));
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.honest__item p { color: #17200a; }

.honest__dog {
  width: clamp(160px, 46vw, 260px);
  margin-top: var(--s7);
  justify-self: end;
}

@media (min-width: 860px) {
  .honest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  /* Гавчик подтянут к колонкам: иначе под плитой висит пустое поле в экран. */
  .honest__dog { width: clamp(200px, 26vw, 320px); margin-top: var(--s5); }
}

/* --- 8. Друзья: узкий блок с розовым акцентом ----------------------------- */

.section--friends { padding-block: var(--s8); }

.friends {
  max-width: 940px;
  margin-inline: auto;
  display: grid;
  gap: var(--s6);
  align-items: center;
  padding: var(--s6);
  background: var(--sink);
  border: var(--bw) solid color-mix(in oklab, var(--pink) 40%, transparent);
  position: relative;
}
.friends::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 54px;
  height: 54px;
  background: var(--pink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.friends__dog { width: clamp(130px, 36vw, 190px); justify-self: center; }
.friends__text { display: grid; gap: var(--s4); justify-items: start; }
.friends__text p { color: var(--paper-dim); }

@media (min-width: 760px) {
  .friends {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s8);
    padding: var(--s7);
  }
}

/* --- 9. Вопросы: details работают без скриптов ---------------------------- */

.section--faq { padding-block: var(--s8) var(--s9); }

.faq__title { margin-bottom: var(--s7); }

.faq { border-top: var(--bw) solid var(--line); }

.qa { background: var(--ink); border-bottom: var(--bw) solid var(--line); }

.qa__q {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover .qa__text { color: var(--lime); }

.qa__face { width: 52px; flex: none; }
.qa__text { flex: 1 1 auto; transition: color var(--d1) linear; }
.qa__chev {
  flex: none;
  color: var(--paper-mute);
  transition: rotate var(--d2) var(--e-out), color var(--d1) linear;
}
.qa[open] .qa__chev { rotate: 180deg; color: var(--lime); }

.qa__a { padding: 0 0 var(--s5) calc(52px + var(--s4)); }
.qa__a p { color: var(--paper-dim); }

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

.foot__call {
  font-size: calc(clamp(2.3rem, 11.5vw, 6.4rem) * var(--khead));
  display: grid;
  justify-items: start;
}
.foot__call span:last-child { color: var(--lime); }
.foot__acts { display: flex; flex-wrap: wrap; gap: var(--s4); }

.foot__list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.foot__list a { color: var(--paper-dim); }
.foot__list a:hover { color: var(--lime); }
.site-foot__cols .legal { margin-top: var(--s5); }

.foot__paw { width: 20px; height: 20px; color: var(--lime); flex: none; }
.site-foot__bar { align-items: center; }

/* --- Шапка на узком экране ------------------------------------------------
   Знак плюс кнопка с nowrap не помещаются в 360 px: ужимаем поля кнопки,
   иначе «ГАВ VPN» ломается на две строки, а кнопка уезжает за край. */

@media (max-width: 430px) {
  .site-head__in { gap: var(--s3); }
  .site-head .btn {
    padding-inline: var(--s3);
    font-size: var(--t-label);
    letter-spacing: 0.06em;
  }
  .logo__word { white-space: nowrap; }
  .logo { flex: none; }
}

/* --- Узкий экран: кнопки в колонку, иначе nowrap уносит их за край -------- */

@media (max-width: 559px) {
  .hero__acts,
  .foot__acts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    justify-items: stretch;
  }
  .hero__acts .btn,
  .foot__acts .btn { width: 100%; padding-inline: var(--s4); }
  .hero__link { justify-self: start; margin-top: var(--s2); }
  .hero__stamp { justify-self: start; }
  .site-foot__cta { grid-template-columns: minmax(0, 1fr); }
}