/* Мобильная вёрстка у нас до 1023px (телефоны и iPad в портрете), а правила мобильной шапки
   в components.css из экспорта Design стоят на 760px. Экспорт не правим — дублируем здесь. */
@media (max-width:1023px){.avo-navbar .avo-nav-burger{display:inline-flex}.avo-navbar .avo-nav-links{display:none}
  .avo-navbar{gap:12px}.avo-navbar .avo-nav-actions{gap:8px}.avo-navbar .avo-nav-actions>.avo-btn{display:none}
  .avo-nav-menu-cta{display:inline-flex!important;width:100%;justify-content:center;margin-top:6px}}
html{scroll-behavior:smooth}
body{overflow-x:hidden} /* ни одна полноширинная подложка не должна давать боковой прокрут */
section,[id]{scroll-margin-top:88px}
/* Пин-секции отматываются ровно на свой верх: их содержимое и так по центру экрана, а сдвиг
   на высоту навбара оставлял страницу внутри ПРЕДЫДУЩЕГО пина — переход по «Узнать подробнее»
   и по пунктам меню выглядел как «ссылка не работает». */
.avo-pin{scroll-margin-top:0}
@keyframes avoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ───────── Грамматика блочных переходов ─────────
   Блок въезжает целиком с одного края, его пара — с противоположного (встречное движение
   читается как «страница собирается», а не как «что-то поехало»). Дистанция небольшая:
   больше 56px уже не вход блока, а проезд. Один раз на секцию, по IntersectionObserver.
   Вертикальный вариант (up) — для обычных потоковых секций: подъём 14px. */
.avo-in{opacity:0;will-change:transform,opacity;
  transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
.avo-in--left{transform:translate3d(-56px,0,0)}
.avo-in--right{transform:translate3d(56px,0,0)}
.avo-in--up{transform:translate3d(0,14px,0)}
.avo-in.is-in{opacity:1;transform:none;will-change:auto}
/* Боковой въезд — язык палубы. В ленте (планшет, телефон, reduced-motion) блок до появления
   торчал бы за левой кромкой на 56px: там вход только вертикальный. */
@media (max-width:1023px){.avo-in--left,.avo-in--right{transform:translate3d(0,14px,0)}}
/* Смена шага внутри пина: новое содержимое приезжает со стороны движения — вперёд справа,
   назад слева. Уход быстрее прихода, поэтому здесь только вход (старое снимается сразу). */
@keyframes avoStepFwd{from{opacity:0;transform:translate3d(32px,0,0)}to{opacity:1;transform:none}}
@keyframes avoStepBack{from{opacity:0;transform:translate3d(-32px,0,0)}to{opacity:1;transform:none}}
@keyframes avoStepFade{from{opacity:0}to{opacity:1}}
.avo-step--fwd{animation:avoStepFwd 260ms var(--ease-out) both}
.avo-step--back{animation:avoStepBack 260ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  .avo-in{transition:opacity 240ms linear;transform:none!important}
  .avo-step--fwd,.avo-step--back{animation:avoStepFade 200ms linear both}
}

/* Лента фиксированных экранов: секция высотой (steps × 100svh), внутри sticky-экран на 100svh. */
.avo-pin{position:relative}
.avo-pin-screen{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;box-sizing:border-box}
@media (max-width:1023px){
  /* ВАЖНО: relative, не static. Подложки секций (картинка + градиенты) — position:absolute;
     inset:0, и без позиционированного предка они цепляются за начальный содержащий блок,
     то есть уезжают на самый верх документа и красят собой герой. Именно это ломало мобильную
     вёрстку: тёмно-зелёная стена тарифов поверх героя и пропавший авокадо в тарифах/триале.
     display:block!important — секции задают display:grid/flex инлайном, он сильнее правила без
     !important; на мобиле это одноколоночный поток независимо от того, что внутри. */
  .avo-pin{height:auto!important}
  .avo-pin-screen{position:relative;height:auto;display:block!important}
}
@media (prefers-reduced-motion:reduce){
  .avo-pin{height:auto!important}
  .avo-pin-screen{position:relative;height:auto;display:block!important}
}

/* Полноширинный цвет блока и колонка-арт, уходящая в край экрана. Цвет секции всегда
   от кромки до кромки — горизонтальные отступы живут на .avo-wrap, не на самой секции. */
.avo-wrap{width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box;padding:0 clamp(20px,4vw,64px)}
.avo-bleed{position:relative;align-self:stretch;overflow:hidden}
/* Кадр заполняет плиту целиком (cover), точка привязки выбрана по персонажу — в
   «Возможностях» это обязательно один и тот же бокс и один и тот же fit для фона и всех пяти
   оверлеев, иначе разъедется совпадение головы между шагами. */
.avo-bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#features .avo-bleed img{object-position:56% center}
#connect .avo-bleed img{object-position:62% center}

.avo-split{display:grid;align-content:stretch;align-items:stretch;width:100%;box-sizing:border-box}
/* Колонка с текстом центрируется по вертикали сама, а колонка-арт тянется на всю высоту
   экрана и уходит в кромку — блок читается как цельная плита, а не как картинка в рамке. */
.avo-split>.avo-col{min-width:0;box-sizing:border-box;display:flex;flex-direction:column;
  justify-content:center;padding-block:clamp(28px,5vh,56px)}
/* Верхний отступ колонки внутри пина — не меньше высоты шапки: текст центрируется по экрану
   и при длинном варианте не должен уезжать под навбар. */
.avo-pin-screen.avo-split>.avo-col{padding-top:calc(var(--nav-h,72px) + 16px)}
:root{--gutter:max(32px,calc((100vw - 1280px)/2 + 64px));--gutter-x:clamp(24px,4.4vw,72px)}
/* Левая кромка текста на закреплённом экране. Все экраны, кроме хиро, живут внутри
   .avo-screen-wrap с max-width:1440px — на широком мониторе он центрируется, и его содержимое
   начинается не от --gutter-x, а от края этой полосы. Хиро полосы не имеет, поэтому на 1920
   его заголовок стоял на 72px, а весь остальной сайт — на 320px. Эта переменная повторяет
   отступ полосы, чтобы кромка у всех блоков была одна. */
:root{--screen-pad:max(var(--gutter-x),calc((100vw - 1440px)/2 + var(--gutter-x)))}

/* ───────── Герой ─────────
   Одна колонка текста по центру высоты, плашки сразу под кнопкой. Верхний отступ считается
   от реальной высоты навбара (--nav-h), иначе заголовок уезжает под шапку. */
.avo-hero{position:relative;overflow:hidden;background:var(--flesh-100);height:calc(100svh - var(--ipbar-h,0px));padding:clamp(96px,12vh,140px) clamp(64px,7vw,136px) clamp(48px,7vh,96px);display:flex;flex-direction:column;justify-content:center;gap:34px}
.avo-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.avo-hero-copy,.avo-hero-cards{position:relative;z-index:1}
.avo-hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.avo-hero-foliage{will-change:transform}
.avo-hero-thumbup,.avo-hero-gesture{transition:opacity 200ms var(--ease-out),transform 260ms cubic-bezier(.34,1.56,.64,1)}
.avo-hero-copy{max-width:min(860px,54%)}
.avo-hero-h1{font-family:var(--font-display);font-size:clamp(30px,4.1vw,76px);font-weight:800;line-height:1.08;margin:0 0 22px;color:var(--text-primary);text-wrap:balance}
.avo-hl{background:var(--avo-600);color:#fff;border-radius:.26em;padding:0 .16em .04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.avo-hero-sub{font-size:clamp(17px,1.35vw,26px);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:34em;margin:0 0 28px;text-wrap:pretty}
.avo-hero-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.avo-hero-note{font-size:var(--text-xs);color:var(--text-secondary)}
.avo-cta-hero{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);padding-left:26px;padding-right:20px;box-shadow:0 16px 34px -14px rgba(32,47,22,.6);transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out)}
.avo-cta-hero:hover{transform:translateY(-2px);box-shadow:0 22px 42px -14px rgba(32,47,22,.68)}
.avo-cta-hero:active{transform:translateY(0)}
/* Плашки прижаты к верху слотов фиксированной высоты и не меняют ширину: раскрытие растёт
   вниз, в зарезервированный под рядом паддинг — соседей не накрывает, вёрстку не двигает. */
.avo-hero-cards{display:flex;align-items:flex-start;gap:14px;max-width:min(780px,58%)}
.avo-hf-slot{position:relative;flex:1 1 0;min-width:0;height:46px}
.avo-hf-slot:hover,.avo-hf-slot:focus-within{z-index:4}
.avo-hf{position:absolute;top:0;left:0;right:0;border:1.5px solid rgba(28,29,22,.26);border-radius:16px;padding:10px 13px;background:transparent;outline:none;cursor:default;transition:opacity 520ms var(--ease-out),border-color .2s var(--ease-out)}
.avo-hf:hover,.avo-hf:focus-visible,.avo-hf:focus-within{border-color:var(--avo-700)}
.avo-hf-head{display:flex;align-items:center;gap:10px}
.avo-hf-icon{flex:0 0 auto;width:26px;height:26px;border-radius:9px;background:var(--avo-600);color:#fff;display:grid;place-items:center}
.avo-hf-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);color:var(--text-primary)}
.avo-hf-text{margin:9px 0 0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-primary);text-wrap:pretty}
.avo-hf-extra{margin:6px 0 0;font-size:var(--text-xs);font-weight:700;color:var(--avo-600)}
.avo-hf-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 260ms var(--ease-out),opacity 180ms var(--ease-out)}
.avo-hf-body>div{overflow:hidden;min-height:0}
.avo-hf:hover .avo-hf-body,.avo-hf:focus-visible .avo-hf-body,.avo-hf:focus-within .avo-hf-body,.avo-hf--open .avo-hf-body{grid-template-rows:1fr;opacity:1}
.avo-hf--open{border-color:var(--avo-700)}

/* Подъём по наведению — только там, где есть настоящий курсор. На тач-экране :hover
   «залипает» после тапа, и карточка тарифа оставалась приподнятой до следующего касания. */
@media (hover:none),(pointer:coarse){
  .avo-pricing-card:hover{transform:none;box-shadow:none}
  .avo-pricing-card--selected:hover{box-shadow:var(--shadow-brand)}
  .avo-cta-hero:hover{transform:none;box-shadow:0 16px 34px -14px rgba(32,47,22,.6)}
  .avo-dp-card:hover{box-shadow:none}
}

/* Кнопка «Выбрать авокадо» в навбаре дублирует CTA хиро на первом экране — скрыта до тех пор,
   пока хиро не уехал (см. NavReveal/showCta в index.html). Единственное место на сайте, где
   допустим opacity:0 на видимом элементе. */
.avo-nav-cta,.avo-nav-menu-cta{transition:opacity .28s var(--ease-out),transform .28s var(--ease-bounce)}
.avo-navcta-hide .avo-nav-cta,.avo-navcta-hide .avo-nav-menu-cta{opacity:0;transform:translateY(-6px);pointer-events:none}

/* На телефоне «Выбрать авокадо» словами в строку не помещается — и не нужно: там это круглая
   кнопка с авокадо, которая ведёт сразу на тарифы. Стоит перед кабинетом (order:-1), дальше
   бургер. Подпись остаётся в разметке (font-size:0 не убирает её из дерева доступности),
   поэтому скринридер по-прежнему читает «Выбрать авокадо». */
@media (max-width:1023px){
  .avo-navbar .avo-nav-actions>.avo-btn.avo-nav-cta{display:inline-flex!important;order:-1;
    width:44px;min-width:44px;height:44px;padding:0;font-size:0;flex:0 0 auto;
    background:transparent!important;border-color:transparent!important;box-shadow:none!important}
  .avo-navbar .avo-nav-actions>.avo-btn.avo-nav-cta::after{content:'🥑';font-size:27px;line-height:1}
  .avo-navbar .avo-nav-actions>.avo-btn.avo-nav-cta:active{transform:scale(.9)}
  .avo-navcta-hide .avo-nav-cta{opacity:1;transform:none;pointer-events:auto;visibility:visible}
}
/* 320px: логотип и три круглые кнопки в строку встают только вплотную. Ужимаются промежутки
   и вордмарк — прятать кнопки нельзя, каждая из трёх ведёт в своё место. */
@media (max-width:380px){
  .avo-navbar{gap:8px!important;padding:12px 12px!important}
  .avo-navbar .avo-nav-actions{gap:6px!important}
  .avo-navbar .avo-nav-actions>.avo-btn.avo-nav-cta,
  .avo-navbar .avo-nav-account,
  .avo-navbar .avo-nav-burger{width:40px!important;min-width:40px!important;height:40px!important}
  .avo-wordmark{gap:7px}
  .avo-wordmark-type{font-size:17px!important}
  .avo-wordmark-mark{width:28px;height:28px}
}

/* ───────── Полноэкранный блок ─────────
   Весь арт-набор нарисован под фон во весь экран: персонаж в одной половине кадра, вторая
   намеренно пустая под текст (03-connect — персонаж справа, 05-faq — слева, и так далее).
   Поэтому кадр кладётся фоном на весь экран, а копия садится в его пустую половину. Половинная
   колонка с object-fit:cover резала персонажу руки — из 1672px кадра в 706px колонки уходило
   893px, то есть 56% картинки.
   Градиент-подложка со стороны текста красится цветом, снятым пипеткой с самого кадра
   (см. значения в JSX), поэтому стык подложки и картинки не виден. */
.avo-screen-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.avo-screen-scrim{position:absolute;inset:0;pointer-events:none}
.avo-screen-wrap{position:relative;z-index:1;height:100%;width:100%;max-width:1440px;margin:0 auto;
  box-sizing:border-box;padding:calc(var(--nav-h,72px) + 20px) var(--gutter-x) clamp(24px,5vh,64px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.avo-screen-copy{min-width:0}
.avo-screen-wrap--left>.avo-screen-copy{grid-column:1 / span 6}
.avo-screen-wrap--right>.avo-screen-copy{grid-column:7 / span 6}
.avo-screen-wrap--rightwide>.avo-screen-copy{grid-column:6 / span 7}
.avo-screen-wrap--center>.avo-screen-copy{grid-column:3 / span 8;justify-self:center;text-align:center;
  display:flex;flex-direction:column;align-items:center}
/* На узком десктопе пустая половина кадра сжимается — копия забирает больше колонок. */
@media (max-width:1180px) and (min-width:1024px){
  .avo-screen-wrap--left>.avo-screen-copy{grid-column:1 / span 7}
  .avo-screen-wrap--right>.avo-screen-copy{grid-column:6 / span 7}
  .avo-screen-wrap--rightwide>.avo-screen-copy{grid-column:5 / span 8}
}

/* Футер поверх последнего экрана: полупрозрачная плашка по нижней кромке триала, чтобы
   «попробуйте авокадо» и футер помещались в один экран. */
/* Размытие живёт отдельным слоем у самой нижней кромки и растворяется кверху: на всей
   плашке backdrop-filter мылил кадр заметно выше видимой подложки — доставалось руке
   персонажа, хотя размывать нужно только пол под строкой футера. */
.avo-footer-over::before{content:'';position:absolute;left:0;right:0;bottom:0;height:72%;
  pointer-events:none;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 78%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 78%)}
.avo-footer-over-in{position:relative;z-index:1}
.avo-footer-over{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to bottom,rgba(28,29,22,0) 0%,rgba(28,29,22,.42) 42%,rgba(28,29,22,.62) 100%);
  border-top:0;color:var(--flesh-200)}
.avo-footer-over-in{max-width:1440px;margin:0 auto;box-sizing:border-box;padding:14px var(--gutter-x);
  display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.avo-footer-over a{color:var(--flesh-200);font-size:var(--text-sm)}
.avo-footer-over a:hover{color:#fff}
/* Копия триала не залезает под плашку футера и поднята так, чтобы указывающая рука
   персонажа приходила на уровень кнопки — ради этого кадр 07-trial и рисовался. */
.avo-trial-wrap{padding-bottom:clamp(170px,22vh,260px)}

/* «Возможности» — единственный блок, где кадр НЕ фон. 02-scene-base почти квадратный
   (1374×1145 = ровно 6:5), персонаж в центре, пустой половины под текст в нём нет. Поэтому
   блок заливается одним цветом, вся информация слева, а кадр стоит отдельной панелью справа.
   Контейнер панели тоже 6:5 при object-fit:contain — кадр входит целиком, без единого
   обрезанного пикселя. Экран при этом остаётся закреплённым во всю высоту, как все прочие.
   Фон и пять оверлеев лежат в одном боксе, поэтому совпадение головы между шагами 01…05
   сохраняется. */
.avo-fc-panel{position:relative;width:100%;aspect-ratio:6/5;border-radius:var(--radius-xl);
  overflow:hidden;background:var(--flesh-200);box-shadow:0 30px 70px -34px rgba(32,47,22,.5)}
.avo-fc-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.avo-screen-wrap--split>.avo-screen-copy{grid-column:1 / span 6}
.avo-screen-wrap--split>.avo-fc-panel{grid-column:7 / span 6}
@media (max-width:1180px) and (min-width:1024px){
  .avo-screen-wrap--split>.avo-screen-copy{grid-column:1 / span 6}
  .avo-screen-wrap--split>.avo-fc-panel{grid-column:7 / span 6}
}

/* ───────── Возможности (пик страницы) ─────────
   Карточка шага: все пять текстов лежат в одной ячейке грида, виден активный. Высота карточки
   равна самому длинному из пяти на любой ширине — при переключении 01…05 она не дышит. */
.avo-features-card{display:flex;flex-direction:column}
/* flex:0 1 auto — стопка не растягивается на свободную высоту: блок текста и табы
   стоят одной группой по центру экрана, а не расползаются к краям. */
.avo-fc-stack{display:grid;flex:0 1 auto;min-height:0}
.avo-fc-stack>.avo-fc-pane{grid-area:1/1;min-width:0;display:flex;flex-direction:column}
.avo-fc-stack>.avo-fc-pane[aria-hidden="true"]{visibility:hidden;pointer-events:none}

/* ───────── Подключение ─────────
   Меняется в блоке ровно одно место — текст шага, — и оно вынесено на белую плашку:
   рамка стоит неподвижно, содержимое сменяется внутри неё. До этого текст менялся прямо
   на фоне блока и смена читалась как случайный прыжок, а не как переход к следующему шагу. */
.avo-cn-col{min-width:0}
.avo-cn-plate{background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:22px 24px;box-sizing:border-box;overflow:hidden}
.avo-cn-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.avo-cn-step{margin-bottom:0}
/* Степпер шагов под карточкой — как степпер «Возможностей», только горизонтальный: кружки
   с номерами на общей линии (серая — весь путь, зелёная — пройденная часть до активного),
   название шага под кружком. Без плашек и теней, в одном стиле с соседним экраном. */
.avo-cn-tabs{position:relative}
.avo-cn-tabs::before,.avo-cn-tabs::after{content:'';position:absolute;top:23px;left:23px;height:2px;border-radius:2px;pointer-events:none}
.avo-cn-tabs::before{right:calc((100% - 20px) / 3 - 23px);background:var(--ink-150)}
.avo-cn-tabs::after{width:calc(((100% - 20px) / 3 * 2 + 20px) * var(--cn-progress,0));background:var(--avo-600);transition:width .45s var(--ease-out)}
.avo-cn-tab{position:relative;z-index:1;border:0;background:transparent;padding:0;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.avo-cn-tab-no{display:grid;place-items:center;width:30px;height:30px;margin:8px;border-radius:50%;
  background:var(--flesh-200);color:var(--text-secondary);font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  transition:background .25s,box-shadow .25s,color .25s}
.avo-cn-tab.is-done .avo-cn-tab-no{background:var(--avo-200);color:var(--avo-800)}
.avo-cn-tab.is-on .avo-cn-tab-no{background:var(--avo-600);color:#fff;box-shadow:0 0 0 4px var(--avo-100)}
.avo-cn-tab-title{display:block;font-size:var(--text-sm);line-height:var(--leading-snug);font-weight:600;color:var(--text-secondary);padding-left:2px}
.avo-cn-tab.is-on .avo-cn-tab-title{font-weight:800;color:var(--text-primary)}
/* avo-cn-scene/-track/-inner/-deck/-card: не используются текущим ConnectSection.jsx, но
   литералы остаются в старой копии компонента внутри _ds_bundle.js (мёртвый код, затирается
   window.ConnectSection) — npm run check сверяет ВЕСЬ бандл, поэтому строка ниже нужна гейту. */
.avo-cn-scene,.avo-cn-track,.avo-cn-inner,.avo-cn-deck,.avo-cn-card{all:unset}

/* ───────── Тарифы ─────────
   Сетка на auto-fit, а не на жёсткие две колонки: как только на пару карточек не хватает
   ширины (телефон, узкий планшет, крупный масштаб), они сами встают друг под друга —
   отдельного медиазапроса на каждый случай для этого не нужно. */
.avo-term-switch .avo-segmented-item{padding:8px 16px}
.avo-term-short{display:none}
.avo-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;width:100%}
/* Одна колонка и на десктопе — ровно так, как на телефоне. В двух колонках при читаемом
   размере подписей «СБП (QR) · Крипта» не помещались и вылезали за правую кромку белой
   панели на 41px; мельче делать нельзя — с этого и начались претензии к шрифтам. Ширину
   панели трогать не стали: она совпадает с переключателем срока над ней. */
.avo-checkout-cols{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
/* Способ доставки и контакт — одна строка, и поле в ней занимает половину. Раньше
   переключатель стоял «не сжимать», забирал 200px из 244px, и на поле оставался огрызок
   в 34px — овал без места под @username. Теперь наоборот: половина ширины закреплена за
   полем, а переключатель ужимается под остаток.
   Сегменты внутри чекаута мельче, чем в переключателе срока: там это главный выбор экрана,
   здесь — служебная строка, и «СБП (QR) · Крипта» в свою колонку иначе не помещались. */
.avo-checkout-cols .avo-segmented{padding:4px}
.avo-checkout-cols .avo-segmented-item{padding:7px 16px;font-size:var(--text-sm);font-weight:var(--weight-semibold);gap:7px}
.avo-checkout-cols .avo-segmented-thumb{top:4px;bottom:4px}
/* Доставка: подпись, переключатель и поле — тремя строками, на всю ширину панели.
   Раньше они стояли в одну строку и на десктопе подпись «Куда доставить» съезжала от
   своего переключателя, а поле для почты оставалось узким. */
.avo-checkout-deliver{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.avo-checkout-contact{width:100%;min-width:0}
/* Пузырьки обоих переключателей — одного размера: ширина панели делится поровну, и
   «Telegram/Email» совпадает с «СБП (QR)/Крипта» независимо от длины подписи. */
.avo-checkout-cols .avo-segmented{width:100%;box-sizing:border-box}
.avo-checkout-cols .avo-segmented-item{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
.avo-checkout-contact .avo-input{height:40px;font-size:var(--text-sm);padding:0 14px}
.avo-checkout-eyebrow{font-size:var(--text-xs)!important;margin-bottom:5px!important}

/* «Изменить» — того же кегля, что и подпись тарифа рядом: это одна строка, а не подпись
   и кнопка разного веса. */
.avo-plan-chosen{font-size:var(--text-sm)}
.avo-plan-change{font-size:var(--text-sm)}

/* Карточка тарифа: выбирается вся плашка целиком, поэтому и курсор на всей плашке.
   «Рекомендуем» — в правом верхнем углу, отдельной строки под бейдж больше нет. */
.avo-plan{position:relative;display:flex;flex-direction:column;padding:18px 20px 20px;cursor:pointer;
  box-sizing:border-box;text-align:left}
/* Нажимается вся плашка, а отклика у неё не было — только у кнопки внутри. */
.avo-plan:active{transform:scale(.985)}
.avo-plan:focus-within{border-color:var(--avo-600)}
.avo-plan-badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;
  border-radius:var(--radius-pill);background:var(--coral-100);color:var(--coral-600);
  font-size:11px;font-weight:800;letter-spacing:.02em;padding:3px 10px;line-height:1.4}
.avo-plan-badge--onDark{background:var(--avo-300);color:var(--avo-900)}
.avo-plan-name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);padding-right:96px}
.avo-pricing-card--featured .avo-plan-name,
.avo-pricing-card--featured .avo-plan-per,
.avo-pricing-card--featured .avo-plan-note,
.avo-pricing-card--featured .avo-plan-feats li{color:var(--flesh-300)}
.avo-plan-price{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.avo-plan-sum{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;line-height:1}
.avo-plan-per{font-size:var(--text-sm);color:var(--text-secondary)}
.avo-plan-note{font-size:var(--text-xs);color:var(--text-secondary);margin-top:4px}
.avo-plan-feats{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.avo-plan-feats li{display:flex;gap:8px;align-items:flex-start;font-size:var(--text-xs);
  color:var(--text-secondary);line-height:1.35}
.avo-plan-cta{width:100%;margin-top:auto}

/* ───────── FAQ: раскрытие не двигает соседей ─────────
   Строка в закрытом виде имеет фиксированную высоту, ответ раскрывается через
   grid-template-rows 0fr→1fr (тот же приём, что в .avo-hf-body), а колонка получает
   min-height по самому длинному ответу — соседняя колонка стоит на месте. */
.avo-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start}
.avo-accordion-item .avo-accordion-trigger{min-height:64px}
.avo-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease-out)}
.avo-faq-answer--open{grid-template-rows:1fr}
.avo-faq-answer>div{overflow:hidden;min-height:0}
/* Прокручивается ровно один раскрытый ответ и только если он не уместился в остаток колонки
   (--faq-panel-max считает FaqSection.jsx). Сама колонка при этом не скроллится никогда. */
.avo-deck .avo-accordion-panel{max-height:var(--faq-panel-max,none);overflow:hidden}
.avo-deck .avo-accordion-panel.avo-faq-clamp{display:-webkit-box;-webkit-box-orient:vertical}
.avo-deck .avo-faq-col{overflow:hidden!important}

/* ───────── Потоковые секции (отзывы, FAQ) ─────────
   Цвет — на самой секции, отступы — на колонках: подложка всегда во всю ширину экрана. */
.avo-sec{overflow:hidden}
.avo-sec-grid{min-height:min(82svh,760px)}
.avo-figure{align-self:stretch;min-height:100%}
.avo-reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
/* На закреплённом экране отзывы стоят колонкой в пустой половине кадра: три карточки в ряд
   ужались бы до нечитаемой ширины. */
.avo-reviews-stack{display:flex;flex-direction:column;gap:14px;width:100%}
.avo-reviews-stack .avo-testimonial-card{padding:16px 18px}
/* Персонаж целиком, не обрезанный кадр: contain, а не cover. */
.avo-art-full{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* ───────── Триал: персонаж на весь кадр, слой с CTA поверх ───────── */
.avo-trial-screen{display:block}
.avo-trial-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% top;pointer-events:none}
.avo-trial-scrim{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(233,240,209,0),rgba(233,240,209,.34) 26%,rgba(233,240,209,.8) 56%,rgba(233,240,209,.97) 78%,var(--avo-100) 94%)}
.avo-trial-copy{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(28px,7vh,86px);
  width:min(620px,calc(100% - 40px));display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1}

/* ───────── Тарифы ───────── */
.avo-pricing-screen{display:grid;align-content:center}

/* ───────── Ленточный вариант шаговых секций (телефон, reduced-motion) ───────── */
.avo-features-flow .avo-fc-art img{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ───────── Планшет ───────── */
@media (max-width:1035px) and (min-width:1024px){
[data-mascot-side]{padding:72px 32px!important}
#trust,#features,#pricing,#faq{padding-top:36px!important;padding-bottom:36px!important}
[data-mascot-side]>div{gap:32px!important}
.avo-ms-art{flex:0 0 240px!important}
.avo-ms-art img{width:240px!important}
.avo-ms-copy{flex:1 1 320px!important}
.avo-hero{padding:44px 32px 156px!important;gap:20px!important}
.avo-hero-bg img{object-position:66% center!important}
.avo-hero-copy{max-width:min(480px,62%)!important}
.avo-hero-h1{font-size:36px!important}
.avo-hero-cards{max-width:min(560px,72%)!important}
}
@media (max-width:1100px) and (min-width:1024px){.avo-grid-4{grid-template-columns:1fr 1fr!important}}

/* ───────── Телефон ─────────
   Горизонтальные отступы — только на .avo-wrap и на собственных паддингах блоков.
   Никаких section{padding-left}: иначе цвет и подложка секции перестают быть на всю ширину. */
@media (max-width:1023px){
.avo-split{grid-template-columns:1fr!important}
.avo-bleed{min-height:58vw;align-self:auto}
.avo-term-switch{width:100%}
.avo-term-switch .avo-segmented-item{
  width:auto!important;
  padding:8px 6px!important;
  font-size:var(--text-xs)!important;
  min-width:0;
  flex:1 1 0;
  white-space:nowrap
}
.avo-term-full{display:none}
.avo-term-short{display:inline}
.avo-checkout-cols{grid-template-columns:1fr!important}
/* Срок подписки — главный выбор экрана, читается первым: крупнее и жирнее, чем служебные
   переключатели чекаута. */
.avo-term-switch .avo-segmented-item{font-size:var(--text-sm)!important;font-weight:700!important;
  padding:9px 8px!important}
.avo-plan-change{background:none;border:0;padding:0;font-family:var(--font-body);
  font-weight:600;color:var(--avo-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Два тарифа рядом, как на a.avocadovpn.net: их сравнивают друг с другом, и в одну колонку
   сравнение превращается в пролистывание. В двух колонках на 360px разваливалась цена — это
   решается размером, а не колонкой: цифры и подписи мельче, карточка теснее. «Рекомендуем»
   остаётся в правом верхнем углу, как на десктопе: так названия тарифов и всё под ними стоят
   на одном уровне в обеих карточках. Бейдж мельче, а место под него держит отступ справа у
   названия — названия короткие («Про», «Pro»), и в узкой карточке их хватает. */
.avo-plan-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
.avo-plan{padding:14px 12px!important}
.avo-plan-badge{top:11px;right:10px;padding:2px 7px;font-size:10px;letter-spacing:0}
.avo-plan-name{padding-right:0!important;font-size:11px;line-height:20px}
.avo-plan-badge + .avo-plan-name{padding-right:84px!important}
.avo-plan-price{flex-wrap:wrap;gap:0 4px;margin-top:4px}
.avo-plan-sum{font-size:clamp(21px,6.4vw,28px)}
.avo-plan-per,.avo-plan-note{font-size:11px}
.avo-plan-feats{margin:10px 0;gap:5px}
.avo-plan-feats li{font-size:11px;line-height:1.3}
.avo-plan-cta{font-size:var(--text-sm)}
.avo-navbar{padding:14px 16px!important}
.avo-nav-menu{right:16px!important;left:16px!important}
.avo-ipbar{font-size:var(--text-xs)!important;gap:6px!important;text-align:center;line-height:1.25}
/* Мобильный герой: высокая подложка на весь блок — сверху спокойная стена под текст и плашки,
   снизу авокадо. Верхний отступ — высота навбара плюс воздух, иначе H1 уезжает под шапку.
   Нижний отступ ≈ высота персонажа, поэтому плашки кончаются над кепкой. */
.avo-hero{height:auto!important;min-height:calc(100svh - var(--ipbar-h,44px))!important;padding:calc(var(--nav-h,72px) + 18px) 20px 92vw!important;gap:0!important;justify-content:flex-start!important;background:linear-gradient(180deg,#f3e7db,#e7d8ca 45%,#f4ece2)!important}
/* Подложка в натуральных пропорциях и прижата к низу — не cover и не fill: растянутый кадр
   выглядит сплюснутым, а cover при раскрытии плашки заметно увеличивает персонажа. */
.avo-hero-bg img{top:auto!important;bottom:0!important;height:auto!important;width:100%!important;object-fit:contain!important;object-position:50% bottom!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px)}
.avo-hero-copy{max-width:none!important}
.avo-hero-h1{font-size:clamp(26px,7.4vw,32px)!important;margin:0 0 12px!important}
.avo-hero-sub{font-size:var(--text-base)!important;margin:0 0 16px!important}
.avo-hero-act{margin-bottom:18px}
.avo-hero-cards{max-width:none!important;flex-direction:column;gap:8px!important}
.avo-hf-slot{height:auto!important;flex:0 0 auto!important;width:100%}
.avo-hf{position:static!important;background:rgba(255,255,255,.92)!important;border-color:rgba(28,29,22,.16)!important;backdrop-filter:blur(10px);box-shadow:0 6px 18px -10px rgba(32,47,22,.45)}
.avo-hf--open{background:#fff!important;border-color:var(--avo-600)!important}
.avo-wordmark-type{font-size:20px!important}
.avo-footer{padding:36px 20px 24px!important}
.avo-grid-3,.avo-grid-4{grid-template-columns:1fr!important}
/* Заголовки секций: длинные русские слова («повседневном») не должны вылезать за экран. Без
   автопереносов («повседнев-ном» читалось как ошибка) — слово рвётся, только если не влезает
   целиком даже в пустую строку. */
.avo-h2{font-size:clamp(26px,7.6vw,34px)!important;overflow-wrap:break-word;hyphens:manual}
.avo-features-card{padding:18px 16px!important;min-height:0!important}
.avo-reviews-grid{grid-template-columns:1fr!important}
.avo-faq-grid{grid-template-columns:1fr!important;gap:0!important}

.avo-cn-tabs{gap:8px!important}
.avo-faq .avo-figure{order:2}
.avo-sec-grid{min-height:0!important}
.avo-figure{min-height:62vw!important;align-self:auto}
.avo-col{padding-left:20px!important;padding-right:20px!important;padding-block:32px!important}
/* Триал на телефоне: персонаж полосой сверху, растворяется в цвете блока, под ним — слой
   с единственной кнопкой. Цвет секции при этом всё равно во всю ширину. */
.avo-trial-screen{position:relative!important;height:auto!important;min-height:0!important;padding-top:68vw}
.avo-trial-art{height:74vw!important;object-fit:cover!important;object-position:50% 22%!important}
.avo-trial-scrim{top:0!important;bottom:auto!important;height:74vw!important;
  background:linear-gradient(to bottom,rgba(233,240,209,0) 58%,rgba(233,240,209,.85) 84%,var(--avo-100) 100%)!important}
.avo-trial-copy{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;
  width:auto!important;padding:0 20px 36px}
/* Тарифы на телефоне: место под персонажа снизу, чтобы он не пропадал из кадра. */
.avo-pricing-screen{position:relative!important;height:auto!important;display:block!important;
  padding:32px 20px 74vw!important}
.avo-pricing-art{object-position:72% bottom!important}
.avo-footer>div:first-child{grid-template-columns:1fr!important;gap:28px!important}
.avo-footer>div:last-child{flex-direction:column;align-items:flex-start!important;gap:10px!important}
}

/* Fixed scene stage. Only the outgoing and incoming surfaces are painted during
   the 580ms transition; their art and copy travel together as one composition. */
html.avo-deck, .avo-deck body {height:100%;overflow:hidden;scroll-behavior:auto}
.avo-deck .avo-scenes {position:fixed;inset:0;overflow:hidden;isolation:isolate;background:var(--flesh-100)}
.avo-deck .avo-scenes > section {position:absolute!important;inset:0;height:100svh!important;min-height:0!important;margin:0;visibility:hidden;pointer-events:none;overflow:hidden;padding:0!important;z-index:0}
.avo-deck .avo-scenes > section.is-active {visibility:visible;pointer-events:auto;z-index:2}
.avo-deck .avo-scenes > section.is-leaving {visibility:visible;z-index:1}
.avo-deck .avo-pin-screen {position:relative;height:100%;overflow:hidden}
.avo-deck .avo-scenes > .avo-hero {padding:calc(var(--nav-h,72px) + 56px) var(--screen-pad) 130px!important}
.avo-deck .avo-screen-wrap {height:100%;padding-top:calc(var(--nav-h,72px) + 28px);padding-bottom:52px}
/* Десктоп-палуба без вертикальных полос: колонка экрана не прокручивается никогда. Что не
   влезает — решается вёрсткой (лента вбок у отзывов, подгонка ответа FAQ), а не скроллом. */
.avo-deck .avo-screen-copy {max-height:100%;overflow:hidden;padding:4px 8px}
.avo-deck .avo-screen-wrap--split {align-items:center}
.avo-deck .avo-screen-wrap--split > .avo-screen-copy {grid-column:1 / span 6}
.avo-deck .avo-in {opacity:1;transform:none;transition:none;will-change:auto}
/* Копия собирается по строкам, пока экран прилетает. До этого весь блок приезжал одной
   плоскостью: заголовок, подзаголовок и карточка появлялись одновременно, и читать было
   неоткуда начать. Порядок чтения задаёт лесенка 45мс, весь вход укладывается в 320мс —
   короче самого перелёта (380мс), поэтому лишнего ожидания не добавляет.
   Только на .is-entering: панель оплаты появляется позже, на уже активном экране, и ей
   задержка входа была бы просто задержкой отклика на клик. */
@keyframes avoCopyIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.avo-deck .avo-scenes > section.is-entering:not(.avo-hero) .avo-screen-copy > *{
  animation:avoCopyIn 260ms var(--ease-out) both}
.avo-deck .avo-scenes > section.is-entering .avo-screen-copy > *:nth-child(1){animation-delay:55ms}
.avo-deck .avo-scenes > section.is-entering .avo-screen-copy > *:nth-child(2){animation-delay:100ms}
.avo-deck .avo-scenes > section.is-entering .avo-screen-copy > *:nth-child(3){animation-delay:145ms}
.avo-deck .avo-scenes > section.is-entering .avo-screen-copy > *:nth-child(n+4){animation-delay:190ms}
@media (prefers-reduced-motion:reduce){
  .avo-deck .avo-scenes > section.is-entering .avo-screen-copy > *{animation:none}
}
/* Колонка выбора уже и стоит по центру своей половины экрана, а не отодвинута от левого
   края одинаковыми полями: так она ближе к персонажу справа и читается парой с ним.
   Та же схема — у отзывов (.avo-reviews-copy), чтобы два соседних экрана держали один ритм. */
.avo-deck .avo-pricing-wrap {grid-template-columns:repeat(12,minmax(0,1fr));padding-left:var(--gutter-x);padding-right:0;column-gap:0}
.avo-deck .avo-pricing-copy {grid-column:1 / span 8;width:min(540px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;justify-self:center;scrollbar-color:var(--avo-400) transparent}
.avo-deck .avo-reviews-copy {width:min(540px,100%);justify-self:center;text-align:center;display:flex;flex-direction:column;align-items:center}
.avo-deck .avo-reviews-copy .avo-reviews-stack {text-align:left}
.avo-pricing-copy > * {flex-shrink:0}
.avo-reviews-copy > * {flex-shrink:0}
.avo-pricing-copy .avo-plan-grid {text-align:left}
.avo-deck .avo-trial-wrap {padding-bottom:150px}
/* Копия триала сдвинута на колонку вправо — ближе к персонажу, к которому и обращена. */
.avo-deck .avo-trial-wrap > .avo-screen-copy,
.avo-dp .avo-trial-wrap > .avo-screen-copy {grid-column:2 / span 6}
/* Кадр триала прижат к низу сильнее центра: на широком коротком окне cover режет по вертикали,
   и именно ноги персонажа уходили из кадра — а теперь под ними ещё и просвечивает футер. */
.avo-deck .avo-trial .avo-screen-art {object-position:66% 72%}
/* Футер лежит на кадре плёнкой, а не плашкой: сплошная заливка обрезала персонажу ноги,
   хотя кадр под ней идёт до самой нижней кромки. Градиент от прозрачного к лёгкому тону
   даёт строке читаемость и оставляет пол и обувь видимыми. */
.avo-footer-over {background:linear-gradient(to bottom,rgba(230,232,203,0) 0%,rgba(230,232,203,.5) 45%,rgba(230,232,203,.78) 100%);color:var(--text-secondary);border-top:0}
.avo-footer-over a {color:var(--text-secondary)}
.avo-footer-over a:hover {color:var(--avo-800);text-decoration:underline;text-underline-offset:4px}
.avo-footer-over-in {gap:10px 22px;padding-block:14px}
.avo-trial .avo-footer {background:transparent;color:var(--text-secondary);border-top:1px solid rgba(28,29,22,.14)}
.avo-scene-nav {position:fixed;right:15px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:3px;padding:8px 3px;border:1px solid rgba(79,101,48,.2);border-radius:24px;background:rgba(251,247,233,.88);backdrop-filter:blur(12px)}
.avo-scene-nav button {position:relative;width:28px;height:29px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.avo-scene-nav button::after {content:'';width:6px;height:6px;border-radius:100%;background:var(--avo-700);opacity:.3;transition:opacity 160ms,transform 160ms}
.avo-scene-nav button[aria-current]::after {opacity:1;transform:scale(1.5)}
.avo-scene-nav button span {display:none;position:absolute;right:36px;white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--flesh-100);color:var(--ink-900);font:600 13px var(--font-body);opacity:0;visibility:hidden;pointer-events:none}
.avo-scene-nav button:hover span,.avo-scene-nav button:focus-visible span {opacity:1;visibility:visible}
.avo-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.avo-deck .avo-hero {background:var(--flesh-100)}
.avo-deck .avo-hf {background:rgba(251,247,233,.94)}
.avo-navcta-hide .avo-nav-cta,.avo-navcta-hide .avo-nav-menu-cta {visibility:hidden}
.avo-scenes > section:focus {outline:none}
.avo-scenes :focus-visible,.avo-scene-nav :focus-visible {outline:3px solid var(--avo-600);outline-offset:4px}
@media (min-width:1024px) and (max-height:760px) {
  .avo-deck .avo-screen-wrap {padding-top:calc(var(--nav-h,72px) + 10px);padding-bottom:26px}
  .avo-deck .avo-screen-wrap h2 {font-size:34px!important}
  .avo-deck .avo-features-card {padding:18px 20px!important}
  .avo-deck .avo-reviews-stack {gap:8px}
  .avo-deck .avo-reviews-stack .avo-testimonial-card {padding:12px 16px}
  .avo-deck .avo-trial-wrap {padding-bottom:150px}
/* Копия триала сдвинута на колонку вправо — ближе к персонажу, к которому и обращена. */
.avo-deck .avo-trial-wrap > .avo-screen-copy,
.avo-dp .avo-trial-wrap > .avo-screen-copy {grid-column:2 / span 6}
  .avo-deck .avo-scenes > .avo-hero {padding-bottom:120px!important}
}
/* Flow is an independent layout and also the escape hatch for zoom, short
   windows and reduced motion. None of these modes need a scroll interceptor. */
.avo-flow .avo-pin {height:auto!important}
.avo-flow .avo-pin-screen {position:relative;height:auto;display:block!important}
/* Без персонажа блок тарифов в ленте заканчивается самим содержимым — резервировать
   место под кадр больше не нужно. */
.avo-flow .avo-pricing-screen {padding:48px 24px 56px!important;min-height:0}
.avo-flow .avo-trial-screen {position:relative;height:auto;min-height:0;padding-top:340px}
.avo-flow .avo-trial-art {height:380px;object-fit:contain;object-position:right top}
.avo-flow .avo-trial-scrim {top:0;bottom:auto;height:380px;background:linear-gradient(transparent 62%,#e6e8cb)}
.avo-flow .avo-trial-copy {position:relative;left:auto;bottom:auto;transform:none;width:auto;max-width:680px;margin:auto;padding:0 24px 40px}
.avo-flow .avo-features-flow .avo-features-card {display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);align-items:center;padding:0!important;box-shadow:none!important;border:1px solid var(--border-subtle)}
.avo-flow .avo-features-flow .avo-fc-art {min-height:0;align-self:stretch}
.avo-flow .avo-cn-art {aspect-ratio:auto!important;height:320px}
.avo-flow .avo-cn-art img {object-fit:contain;object-position:right center!important}
.avo-flow #connect > .avo-wrap {max-width:840px}
@media (max-width:1023px) {
  .avo-flow .avo-features-flow .avo-features-card {display:flex}
  .avo-flow .avo-features-flow .avo-fc-art {aspect-ratio:6/5!important;width:100%;max-height:270px}
  .avo-flow .avo-features-flow .avo-fc-art img {object-fit:contain}
  .avo-flow .avo-features-flow .avo-features-card {border-radius:20px}
  .avo-flow .avo-cn-art {height:66vw;max-height:320px}
  .avo-flow .avo-pricing-screen {padding:36px 20px 40px!important}
  .avo-flow .avo-trial-screen {padding-top:68vw}
  .avo-flow .avo-trial-copy {padding:0 20px 32px}
  .avo-flow .avo-footer {padding:28px 20px 24px!important}
  .avo-flow .avo-footer>div:first-child {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 16px!important}
  .avo-flow .avo-footer>div:first-child>div:first-child {grid-column:1/-1}
  .avo-flow .avo-footer>div:first-child a {font-size:14px!important;line-height:1.4;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .avo-flow *, .avo-flow *::before, .avo-flow *::after {animation:none!important;transition:none!important}
  .avo-flow .avo-in {transform:none!important;opacity:1!important}
}
/* IP-полоса и шапка уезжают вверх тем же движением и за то же время, что и экраны (380ms,
   та же кривая), а не пропадают мгновенно — иначе при перелистывании туда-обратно шапка прыгала. */
.avo-deck .avo-ipbar {position:fixed;top:0;left:0;right:0;z-index:55;display:flex!important;transform:translateY(-100%);transition:transform 380ms cubic-bezier(.22,.68,0,1)}
.avo-deck[data-scene="top"] .avo-ipbar {transform:none}
.avo-deck .avo-nav-shell {position:fixed!important;inset:0 0 auto;z-index:50;transform:translateY(0);transition:transform 380ms cubic-bezier(.22,.68,0,1)}
.avo-deck[data-scene="top"] .avo-nav-shell {transform:translateY(44px)}

/* Узкий десктоп (1024…1180) — самый тесный случай палубы: текста столько же, а ширины и
   высоты меньше. Колонка забирает у кадра одну колонку сетки, карточка идёт плотнее —
   иначе низ карточки с навигацией по шагам уходил за нижнюю кромку экрана. */
@media (min-width:1024px) and (max-width:1180px) {
  .avo-deck .avo-screen-wrap--split {column-gap:16px}
  .avo-deck .avo-screen-wrap--split > .avo-screen-copy {grid-column:1 / span 7}
  .avo-deck .avo-screen-wrap--split > .avo-fc-panel {grid-column:8 / span 5}
  .avo-deck .avo-features-card {padding:16px 18px!important}
  .avo-deck #features .avo-screen-copy .avo-h2 {font-size:30px!important;margin:8px 0 4px!important}
  .avo-deck #features .avo-screen-copy > p {font-size:var(--text-base)!important;margin-bottom:12px!important}
  .avo-deck .avo-cn-plate {padding:18px 20px}
}
/* Вопросы: колонка уже и сдвинута к персонажу. Кадр 05-faq держит авокадо слева, а список
   стоял у самой правой кромки — между ними оставалась пустая полоса в треть экрана. */
.avo-deck .avo-screen-wrap--rightwide > .avo-faq-col {grid-column:5 / span 7;width:min(660px,100%);justify-self:start}
@media (min-width:1600px) {
  .avo-deck .avo-screen-wrap--rightwide > .avo-faq-col {grid-column:6 / span 6}
}
/* Вопросы на закреплённом экране идут плотнее, чем в ленте: восемь строк, самый длинный
   ответ и кнопка поддержки обязаны уместиться в один экран без всякой прокрутки. */
.avo-deck .avo-accordion-trigger {min-height:52px;padding-block:10px}
.avo-deck .avo-faq-col .avo-h2 {font-size:clamp(26px,2.4vw,36px)!important;margin:10px 0 12px!important}
.avo-deck .avo-faq-col > .avo-btn {margin-top:12px!important}
.avo-deck .avo-accordion-panel {font-size:var(--text-sm)}
@media (min-width:1024px) and (max-height:900px) {
  .avo-deck .avo-accordion-trigger {min-height:46px;padding-block:8px;font-size:var(--text-sm)}
  .avo-deck .avo-faq-col .avo-h2 {font-size:28px!important;margin:8px 0 10px!important}
  .avo-deck .avo-faq-grid {gap:0 24px}
  .avo-deck .avo-accordion-panel {line-height:1.5;padding-bottom:10px}
}
/* Тарифы на невысоком окне: когда раскрыта панель оплаты, экран переставал вмещать колонку
   выбора — а это ровно тот случай, когда появлялась «лишняя прокрутка» внутри блока. */
@media (min-width:1024px) and (max-height:820px) {
  .avo-deck .avo-pricing-copy .avo-h2 {font-size:30px!important;margin-bottom:4px!important}
  .avo-deck .avo-pricing-copy > p {margin-bottom:8px!important}
  .avo-deck .avo-pricing-copy .avo-term-switch {margin-bottom:10px!important;padding:3px}
  .avo-deck .avo-pricing-copy .avo-term-switch .avo-segmented-item {height:38px}
  .avo-deck .avo-plan {padding:12px 14px 14px}
  .avo-deck .avo-plan-feats {margin:7px 0;gap:4px}
  .avo-deck .avo-plan-price {margin-top:4px}
  .avo-deck .avo-checkout-contact .avo-input {height:34px}
  .avo-deck .avo-pricing-copy .avo-checkout-cols {gap:8px}
  .avo-deck .avo-pricing-copy .avo-checkout-cols .avo-segmented-item {padding-block:5px}
  .avo-deck .avo-pricing-copy .avo-checkout-cols + .avo-btn {margin-top:8px!important}
  .avo-deck .avo-pricing-copy > p:last-child {margin-top:6px!important;font-size:11px!important}
}
/* Самый тесный случай: невысокое окно И раскрытая панель оплаты. Ужимать дальше нечего,
   поэтому здесь ужимается и шапка блока — но без потери строк. */
@media (min-width:1024px) and (max-height:790px) {
  .avo-deck .avo-pricing-copy .avo-h2 {font-size:26px!important}
  .avo-deck .avo-pricing-copy > p:nth-of-type(1) {font-size:var(--text-sm)!important;margin-bottom:6px!important}
  .avo-deck .avo-plan-sum {font-size:var(--text-2xl)}
  .avo-deck .avo-plan-cta {height:32px}
}
/* Отзывы на невысоком окне: карточки плотнее, иначе колонка перерастает экран. */
@media (min-width:1024px) and (max-height:820px) {
  .avo-deck .avo-reviews-stack {gap:8px}
  .avo-deck .avo-reviews-stack .avo-testimonial-card {padding:12px 16px;gap:8px}
  .avo-deck .avo-reviews-copy .avo-h2 {font-size:30px!important}
}
/* Preserve the card shadow inside its scrollable text column. */
.avo-deck #features .avo-screen-copy {padding:8px 12px 24px}
.avo-deck .avo-features-card {box-shadow:0 8px 18px -12px rgba(32,47,22,.25)!important}
/* On a phone the illustration is a compact companion to the title, not five
   repeated full-width hero frames. Text stays in normal document flow. */
@media (max-width:1023px) {
  .avo-flow .avo-features-flow .avo-features-card {display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px 14px;padding:16px!important;align-items:start}
  .avo-flow .avo-features-flow .avo-features-card > div:last-child {display:contents}
  .avo-flow .avo-features-flow .avo-fc-art {grid-column:1;grid-row:1 / span 2;width:100px;height:110px;aspect-ratio:auto!important;align-self:start;border-radius:12px}
  .avo-flow .avo-features-flow .avo-fc-art img {object-fit:cover}
  .avo-flow .avo-features-card > div:last-child > p:first-child {grid-column:2;font-size:11px!important;margin:0!important;letter-spacing:.02em!important}
  .avo-flow .avo-features-card h3 {grid-column:2;font-size:20px!important;margin:0!important}
  .avo-flow .avo-features-card > div:last-child > p:not(:first-child) {grid-column:1/-1;font-size:15px!important;margin:0!important;line-height:1.6!important}
}
/* Narrow desktop windows use the same accessible navigation as a tablet. */
@media (min-width:1024px) and (max-width:1023px) {
  .avo-flow .avo-navbar {padding:16px 24px;gap:16px}
  .avo-flow .avo-navbar .avo-nav-links {display:none}
  .avo-flow .avo-navbar .avo-nav-burger {display:inline-flex}
  .avo-flow .avo-sec-grid {grid-template-columns:1fr!important;min-height:0}
  .avo-flow .avo-figure {min-height:300px}
  .avo-flow .avo-col {padding:32px!important}
}
.avo-deck .avo-pricing-copy .avo-term-switch {display:flex!important;width:100%;max-width:504px}
.avo-deck .avo-pricing-copy .avo-segmented-item {flex:1 1 0;min-width:0;width:auto!important;white-space:nowrap;font-size:clamp(12px,1.1vw,16px)!important}

/* ───────── Контентные страницы возможностей — /vozmozhnosti/<slug>/ ─────────
   Одна возможность = одна страница. Вместо полноэкранного героя — цветная плашка с кадром:
   на контентной странице герой во весь экран увёл бы сам текст за нижнюю кромку, а так
   человек видит заголовок и сразу за ним текст. Последний экран — тот же триал, что и на
   главной, во всю высоту (см. .avo-dp .avo-trial ниже). */
.avo-dp{background:var(--bg-surface);color:var(--text-primary)}
.avo-dp-bar{position:sticky;top:0;z-index:20;background:rgba(251,247,233,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
/* Та же шапка, что на главной, только внутри своей максимальной ширины и чуть ниже ростом:
   на контентной странице она стоит всегда, а не появляется при прокрутке. */
.avo-dp-nav{max-width:1280px;margin:0 auto;background:transparent;padding:12px clamp(20px,4vw,40px)}
.avo-dp-nav .avo-nav-links{gap:26px}
/* «Назад» — первым пунктом, перед «Возможностями», и оформлен пилюлей: это не раздел,
   а выход со страницы, и он не должен читаться как пятый пункт меню. */
.avo-dp-back{display:inline-flex;align-items:center;gap:3px;padding:6px 14px 6px 10px;
  border-radius:var(--radius-pill);border:1.5px solid var(--border-default);background:var(--bg-surface);
  color:var(--text-primary);font-weight:var(--weight-semibold);font-size:var(--text-sm);text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.avo-dp-back:hover{border-color:var(--avo-500);background:var(--avo-100)}
.avo-dp-bar-cta{flex:0 0 auto;text-decoration:none}
/* Узкий десктоп: логотип + «Назад» + четыре раздела + «Войти» + кнопка в 1024px влезают
   только если ужать промежутки. Иначе шапка вылезала за экран на пару пикселей — и внизу
   страницы появлялась горизонтальная полоса прокрутки. */
@media (max-width:1120px){
  .avo-dp-nav{gap:14px;padding-left:20px;padding-right:20px}
  .avo-dp-nav .avo-nav-links{gap:16px}
  .avo-dp-nav .avo-nav-link{font-size:var(--text-sm)}
  .avo-dp-back{padding:5px 11px 5px 8px}
}

/* Плашка: слева заголовок и лид, справа кадр возможности. Кадр — тот же, что в блоке
   «Возможности» на главной, поэтому страница узнаётся по картинке. */
.avo-dp-band{border-bottom:1px solid var(--border-subtle)}
.avo-dp-band-in{max-width:1120px;margin:0 auto;box-sizing:border-box;
  padding:clamp(28px,4.5vw,52px) clamp(20px,4vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);gap:clamp(20px,4vw,44px);align-items:center}
.avo-dp-band-copy{min-width:0}
.avo-dp-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;
  color:var(--avo-700);margin:0 0 10px;text-transform:uppercase}
.avo-dp-h1{font-family:var(--font-display);font-size:clamp(27px,3.8vw,48px);line-height:1.06;font-weight:800;
  letter-spacing:-0.01em;margin:0 0 12px;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.avo-dp-lead{font-size:clamp(15px,1.25vw,19px);line-height:var(--leading-relaxed);color:var(--text-secondary);
  max-width:40em;margin:0;text-wrap:pretty}
.avo-dp-art{position:relative;aspect-ratio:6/5;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--flesh-200);box-shadow:0 24px 56px -32px rgba(32,47,22,.5)}
.avo-dp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

.avo-dp-article{background:var(--bg-surface)}
.avo-dp-article-in{max-width:720px;margin:0 auto;box-sizing:border-box;
  padding:clamp(32px,5vw,60px) clamp(20px,4vw,40px)}
.avo-dp-h2{font-family:var(--font-display);font-size:clamp(21px,2.2vw,30px);line-height:var(--leading-snug);
  font-weight:800;letter-spacing:-0.01em;margin:0 0 14px;text-wrap:balance}
.avo-dp-how{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-primary);
  margin:0 0 20px;padding-left:16px;border-left:3px solid var(--avo-300);text-wrap:pretty}
.avo-dp-list{background:var(--flesh-100);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px}
.avo-dp-list-title{font-size:var(--text-sm);font-weight:var(--weight-bold);margin:0 0 10px;color:var(--text-primary)}
.avo-dp-list ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.avo-dp-list li{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-sm);
  line-height:var(--leading-normal);color:var(--text-secondary)}
.avo-dp-note{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--text-muted);margin:0}
.avo-dp-more{font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin:36px 0 12px}

/* Переключатель между пятью страницами — он же оглавление хаба. */
.avo-dp-switch{display:flex;flex-wrap:wrap;gap:8px}
.avo-dp-switch a{display:inline-flex;align-items:center;gap:8px;background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:8px 15px;
  font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none;
  transition:border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}
.avo-dp-switch a[aria-current]{border-color:var(--avo-600);color:var(--text-primary);font-weight:700}
.avo-dp-switch b{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--avo-700)}

/* Хаб: пять карточек со своими подложками. */
.avo-dp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.avo-dp-card{display:block;border-radius:var(--radius-xl);padding:20px;text-decoration:none;
  color:var(--text-primary);border:1px solid var(--border-subtle);
  transition:box-shadow var(--duration-base) var(--ease-out)}
.avo-dp-card h2{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);
  font-weight:700;margin:6px 0 6px}
.avo-dp-card p{font-size:var(--text-sm);color:var(--text-secondary);margin:0}

/* Последний экран страницы — триал с главной. Он рассчитан на палубу (класс .avo-deck на
   html), поэтому те же правила продублированы для .avo-dp. */
.avo-dp .avo-trial-wrap{padding-bottom:150px}
.avo-dp .avo-trial .avo-screen-art{object-position:66% 72%}
.avo-dp .avo-footer-over{background:linear-gradient(to bottom,rgba(230,232,203,0) 0%,rgba(230,232,203,.5) 45%,rgba(230,232,203,.78) 100%);
  color:var(--text-secondary);border-top:0}
.avo-dp .avo-footer-over a{color:var(--text-secondary)}
.avo-dp .avo-footer-over a:hover{color:var(--avo-800);text-decoration:underline;text-underline-offset:4px}
.avo-dp .avo-footer{background:var(--flesh-100);color:var(--text-secondary);border-top:1px solid var(--border-subtle)}
.avo-dp .avo-footer a{color:var(--text-secondary)}
.avo-dp .avo-footer a:hover{color:var(--avo-800)}

@media (max-width:860px){
  .avo-dp-band-in{grid-template-columns:1fr;gap:20px}
  .avo-dp-art{order:-1;aspect-ratio:16/10}
}
@media (max-width:620px){
  /* Кнопка в шапке не помещается рядом с логотипом и «на главную» — её роль берут на себя
     логотип (ведёт на главную) и кнопка на последнем экране. */
  .avo-dp-bar-cta{display:none}
}
/* 320px: логотип + «Назад» + «Войти» + кнопка в строку уже не встают. «Войти» уходит —
   вход есть в кабинете по кнопке, а горизонтальная полоса прокрутки не нужна никому. */
@media (max-width:560px){
  .avo-dp-bar-in{gap:10px;padding-left:16px;padding-right:16px}
  .avo-dp-brand{font-size:17px}
  .avo-dp-list ul{flex-direction:column;gap:8px}
}

/* ───────── Перенесено из локальной работы Codex 22.09 ───────── */
/* September polish: shared controls, native mobile rails and deliberate art crops. */
.avo-flow .avo-scenes>section{scroll-margin-top:calc(var(--nav-h,72px) + 16px)}
.avo-mobile-rail{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0}
.avo-rail-controls{display:none}
.avo-deck-controls{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:12px;background:rgba(251,247,233,.96);border:1px solid rgba(79,101,48,.2);border-radius:32px;padding:7px 10px;box-shadow:0 4px 24px #26341d12;color:var(--avo-900)}
.avo-deck-controls button,.avo-rail-controls>button{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--avo-300);border-radius:50%;background:var(--flesh-100);color:var(--avo-900);font-size:22px;cursor:pointer}
.avo-deck-controls button:last-child,.avo-rail-controls>button:last-child{background:var(--avo-700);border-color:var(--avo-700);color:white}
.avo-deck-controls button:disabled,.avo-rail-controls>button:disabled{opacity:.3;cursor:default}
.avo-deck-count{font:500 12px var(--font-mono);white-space:nowrap;min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
@keyframes avoArrowHint{0%,100%{box-shadow:0 0 0 0 #648b3940}50%{box-shadow:0 0 0 6px #648b3910}}
.avo-deck-next--hint{animation:avoArrowHint 2s ease-in-out 3}
.avo-deck .avo-screen-wrap{padding-bottom:90px}
.avo-deck .avo-trial-wrap{padding-bottom:180px}
.avo-review-disclosure{font-size:12px;font-weight:700;color:var(--avo-800);margin:0 0 18px}
.avo-review-rail .avo-mobile-rail{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.avo-deck .avo-reviews .avo-screen-wrap--left>.avo-screen-copy{grid-column:1 / span 8}
.avo-deck .avo-reviews .avo-screen-wrap{padding-left:clamp(32px,7vw,100px)}

@media(max-width:1023px){
  .avo-mobile-rail,.avo-review-rail .avo-mobile-rail{display:flex!important;flex-direction:row;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 10px;}
  .avo-mobile-rail::-webkit-scrollbar{display:none}
  .avo-mobile-rail>*{flex:0 0 calc(100% - 22px);min-width:0;scroll-snap-align:start;box-sizing:border-box;scroll-snap-stop:always}
  .avo-rail-controls{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--avo-700)}
  .avo-rail-controls>span{font:500 12px var(--font-mono)}
  .avo-rail-dots{display:flex;flex:1;justify-content:center;gap:0}
  .avo-rail-dots button{position:relative;width:24px;height:44px;border:0;background:transparent;padding:0;cursor:pointer}
  .avo-rail-dots button::after{content:'';display:block;width:6px;height:6px;margin:auto;border-radius:10px;background:var(--avo-300)}
  .avo-rail-dots button[aria-current]::after{background:var(--avo-700);width:16px}
  .avo-flow .avo-features-flow .avo-features-card{display:flex!important;flex-direction:column;padding:0!important;gap:0}
  .avo-flow .avo-features-flow .avo-features-card>div:last-child{display:block;padding:16px!important}
  .avo-flow .avo-features-flow .avo-fc-art{width:100%;height:180px;max-height:none;flex:none;border-radius:0;align-self:auto}
  .avo-flow .avo-features-flow .avo-fc-art img{object-fit:cover;object-position:center 45%}
  .avo-flow .avo-features-card h3{font-size:22px!important;margin:8px 0!important;line-height:1.18!important}
  .avo-flow .avo-features-card>div:last-child>p:not(:first-child){font-size:14px!important;line-height:1.5!important;margin-top:8px!important}
  .avo-flow .avo-cn-art{height:230px;max-height:none;min-height:0}
  .avo-flow .avo-cn-art img{object-fit:cover;object-position:82% 48%!important;width:100%;height:100%}
  .avo-connect-rail article{padding:18px!important}
  .avo-connect-rail h3{font-size:23px!important;line-height:1.2!important}
  .avo-connect-rail p{font-size:14px!important;line-height:1.5!important}
  .avo-connect-rail .avo-btn{width:100%;font-size:14px!important;padding-inline:12px}
  .avo-reviews .avo-sec-grid{display:flex;flex-direction:column}
  .avo-reviews .avo-col{width:100%;box-sizing:border-box}
  .avo-reviews .avo-figure{order:-1;min-height:0!important;height:190px;width:100%;overflow:hidden}
  .avo-reviews .avo-art-full{object-fit:cover;object-position:82% center!important}
  .avo-faq .avo-figure{order:-1;min-height:0!important;height:240px;overflow:hidden}
  .avo-faq .avo-art-full{object-fit:cover;object-position:12% 72%!important;width:185%;max-width:none;height:100%}
  .avo-faq .avo-col{padding-top:24px!important}
  .avo-accordion-trigger{font-size:16px;padding-block:17px}
  .avo-flow .avo-trial-screen{padding-top:270px}
  .avo-flow .avo-trial-art{height:280px!important;object-fit:cover!important;object-position:82% center!important}
  .avo-flow .avo-trial-scrim{height:280px!important;background:linear-gradient(transparent 75%,#e6e8cb)!important}
}
@media(prefers-reduced-motion:reduce){.avo-deck-next--hint{animation:none}}
@media(max-width:1023px){
 .avo-col>p,.avo-wrap>p{font-size:16px!important;line-height:1.5!important}
 .avo-review-disclosure{font-size:12px!important}
 .avo-reviews h2{hyphens:none}
 .avo-flow .avo-cn-art{height:260px}
 .avo-flow .avo-cn-art img{width:100%;height:100%;object-fit:cover;object-position:center!important}
 .avo-flow .avo-faq .avo-art-full{width:100%;height:100%;object-position:center!important}
}
@media(max-width:1023px){
 .avo-flow .avo-cn-art img,.avo-flow .avo-faq .avo-art-full,.avo-reviews .avo-art-full,.avo-flow .avo-trial-art{object-fit:contain!important;object-position:center!important}
 .avo-reviews .avo-figure{background:#fdf3e2}
 .avo-flow .avo-trial-screen{padding-top:280px}
 .avo-flow .avo-trial-art{width:100%;height:280px!important;inset:0}
}
@media(max-width:1023px){
}
@media(max-width:1023px){
 .avo-flow .avo-cn-art{height:77vw;max-height:330px}
 .avo-faq .avo-figure{height:62vw;max-height:270px}
 .avo-reviews .avo-figure{height:70vw;max-height:300px}
 .avo-flow .avo-cn-art img,.avo-flow .avo-faq .avo-art-full,.avo-reviews .avo-art-full,.avo-flow .avo-trial-art{object-fit:cover!important}
 .avo-flow .avo-trial-screen{padding-top:min(80vw,344px)}
 .avo-flow .avo-trial-art,.avo-flow .avo-trial-scrim{height:min(80vw,344px)!important}
 .avo-reviews .avo-col>.avo-review-disclosure{font-size:12px!important;line-height:1.5!important}
}
/* Keep delivery labels beside their choices; the contact field owns a full row. */

/* Подключение на телефоне: заголовок, под ним крупный маскот без жёстких краёв, лента шагов
   заезжает на дорожку. Картинка растворяется в фоне блока, поэтому маскот стоит внутри
   текста, а не отдельной полосой над ним. */
@media(max-width:1023px){
  .avo-flow #connect .avo-cn-head{padding-bottom:0!important;position:relative;z-index:1}
  .avo-flow #connect .avo-cn-head p{margin-bottom:0!important}
  .avo-flow .avo-cn-art{height:auto!important;aspect-ratio:1/1!important;max-height:460px!important;margin-top:-12px;background:transparent!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%),linear-gradient(to right,#000 72%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%),linear-gradient(to right,#000 72%,transparent 100%);mask-composite:intersect}
  .avo-flow .avo-cn-art img{object-fit:cover!important;object-position:center 40%!important;width:100%;height:100%}
  .avo-flow #connect .avo-cn-body{position:relative;z-index:1;margin-top:-72px;padding-top:0!important}
}

/* Тарифы на телефоне: персонаж полосой над заголовком, края растворяются в цвет блока. */
.avo-pricing-mart{display:none}
@media(max-width:1023px){
  .avo-pricing-mart{display:block;position:relative;z-index:1;margin:-24px -20px 0;height:min(78vw,330px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 70%,transparent 100%)}
  .avo-pricing-mart img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
  .avo-flow .avo-pricing-screen{padding-top:24px!important}
}

/* FAQ на телефоне: кадр целиком в своих пропорциях (кепка не срезается ни на одной ширине),
   низ растворяется в фон блока — без видимого шва между картинкой и вопросами. */
@media(max-width:1023px){
  .avo-faq .avo-figure{height:auto!important;max-height:none!important;aspect-ratio:780/484;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 72%,transparent 100%)}
  .avo-faq .avo-art-full{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important}
}

/* Планшет в ленте (761–1023): кадр «Подключения» стоял справа с contain, слева оставалась
   серо-зелёная подложка. Теперь кадр во всю ширину, края растворяются в фон блока. */
@media(min-width:1024px) and (max-width:1023px){
  .avo-flow .avo-cn-art{background:transparent!important;height:auto!important;aspect-ratio:16/9!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%)}
  .avo-flow .avo-cn-art img{object-fit:cover!important;object-position:70% center!important;width:100%;height:100%}
}

/* Мобильная вёрстка: плашку хиро раскрывает только нажатие (класс --open), не наведение/фокус. */
@media (max-width:1023px){
  .avo-hf:not(.avo-hf--open) .avo-hf-body{grid-template-rows:0fr!important;opacity:0!important}
}

/* Страница возможности: «На главную» над заголовком плашки, по левому краю её колонки. */
.avo-dp-backrow{max-width:1120px;margin:0 auto;box-sizing:border-box;padding:18px clamp(20px,4vw,40px) 0}
.avo-dp-backrow + .avo-dp-band-in{padding-top:clamp(16px,2.5vw,28px)}
/* Планшет в мобильной вёрстке: кадр FAQ по ширине вырастал до ~460px — ограничиваем. */
@media (min-width:600px) and (max-width:1023px){ .avo-faq .avo-figure{max-height:340px!important} }

/* Отзывы на десктопе: лента вбок по две карточки вместо колонки с прокруткой. Листается
   точками и стрелками ленты; колесо и стрелки клавиатуры по-прежнему ведут по экранам. */

/* ───────── Кнопки: единый стиль по образцу «Выбрать авокадо» в хиро ─────────
   Шрифт и насыщенность — как у кнопки хиро; у основных кнопок та же мягкая тень и подъём
   при наведении. Размер задаёт роль: главный призыв (хиро, пробный доступ) — lg 56px,
   действия внутри блоков (шаги подключения, тарифы, оплата) — md 46px. */
#root .avo-btn{font-family:var(--font-display);font-weight:800;letter-spacing:.005em}
#root .avo-btn--primary{box-shadow:0 12px 26px -14px rgba(32,47,22,.55);transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s var(--ease-out)}
#root .avo-btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(32,47,22,.62)}
#root .avo-btn--primary:active:not(:disabled){transform:none}
#root .avo-nav-cta,#root .avo-btn--sm{box-shadow:none}
@media (prefers-reduced-motion:reduce){#root .avo-btn--primary:hover{transform:none}}
/* Невысокие экраны (≤760 по высоте): «Подключение» не влезало на 5px — ужимаем отступ под лидом. */
@media (min-width:1024px) and (max-height:760px){ .avo-deck #connect .avo-cn-col>p{margin-bottom:10px!important} }

/* Тарифы: зачёркнутая помесячная цена без скидки рядом с ценой срока. */
.avo-plan-was{font-size:var(--text-sm);color:var(--text-muted);text-decoration-thickness:1.5px;margin-left:2px}
.avo-pricing-card--featured .avo-plan-was{color:var(--flesh-300)}

/* Подсказка у слова (AvoHint в usePinScene.jsx): «Telegram Stars» в сноске тарифов, «приложение»
   в шаге подключения. Плашка живёт в body с position:fixed, место считает скрипт. */
/* Пунктир цветом текста, а не зелёный: ссылки на сайте — зелёные со сплошной линией, поэтому
   подсказка со ссылкой не путается. */
.avo-hint{display:inline;white-space:nowrap;border-bottom:1px dotted currentColor;cursor:help;outline:none;-webkit-tap-highlight-color:transparent}
.avo-hint:focus-visible{border-bottom-style:solid}
.avo-hint-pop{position:fixed;z-index:1000;box-sizing:border-box;width:max-content;max-width:min(300px,calc(100vw - 24px));
  padding:9px 13px;border-radius:12px;background:var(--flesh-100);color:var(--avo-900);font-family:var(--font-body);
  font-size:13px;font-weight:600;line-height:1.4;text-align:left;box-shadow:0 8px 24px rgba(20,30,15,.22),0 1px 2px rgba(20,30,15,.12);
  pointer-events:none;animation:avo-hint-in .16s var(--ease-out)}
.avo-hint-pop::after{content:'';position:absolute;left:var(--hint-arrow,50%);top:100%;width:10px;height:6px;margin-left:-5px;
  background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}
.avo-hint-pop--below::after{top:auto;bottom:100%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.avo-hint-pop--side::after{left:auto;right:100%;top:var(--hint-arrow,50%);width:6px;height:10px;margin:-5px 0 0;clip-path:polygon(100% 0,100% 100%,0 50%)}
@keyframes avo-hint-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.avo-hint-pop{animation:none}}

/* Окно оплаты: страница Platega во фрейм не встраивается (X-Frame-Options: DENY), поэтому
   здесь статус и повторное открытие окна оплаты, а платёж идёт в маленьком окне поверх. */
.avo-paymodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,28,15,.55);backdrop-filter:blur(4px);animation:avoFadeIn var(--duration-base) var(--ease-out)}
.avo-paymodal-card{position:relative;width:min(420px,100%);max-height:calc(100svh - 32px);overflow:auto;box-sizing:border-box;padding:28px 24px 22px;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.avo-paymodal-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:var(--text-primary)}
.avo-paymodal-text{margin:0;color:var(--text-secondary);font-family:var(--font-display);font-weight:600;font-size:.9375rem;line-height:1.45}
.avo-paymodal-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--avo-700)}
.avo-paymodal-status--bad{color:var(--coral-600,#c0392b)}
.avo-paymodal-note{margin:0;font-size:var(--text-xs);color:var(--text-muted)}
.avo-paymodal-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;color:var(--text-muted);cursor:pointer}
.avo-paymodal-x:hover{background:var(--flesh-100)}
@keyframes avoFadeIn{from{opacity:0}to{opacity:1}}
.avo-paymodal .avo-btn{font-family:var(--font-display);font-weight:800}

/* Статический снимок главной (seo-snapshot.mjs) — виден до запуска React и тем, кто JS не
   выполняет (Яндекс частично, ИИ-краулеры). React заменяет его целиком; стиль фирменный,
   чтобы короткая вспышка выглядела как страница, а не как поломка. */
.avo-prerender{max-width:760px;margin:0 auto;padding:calc(var(--ipbar-h,44px) + 88px) 20px 64px;box-sizing:border-box;min-height:100svh;background:var(--flesh-100);color:var(--text-primary);font-family:var(--font-body);line-height:1.6}
.avo-prerender h1{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.08;margin:0 0 12px}
.avo-prerender h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);margin:36px 0 10px}
.avo-prerender h3{font-size:var(--text-lg);margin:20px 0 4px}
.avo-prerender a{color:var(--avo-700)}

/* Знак в шапке — пиктограмма целиком, без круга: в дизайн-системе .avo-wordmark-mark обрезает
   картинку в кружок на светлой подложке (было под старый квадратный знак). Новая пиктограмма
   Astra прозрачная и сама держит силуэт. */
.avo-navbar .avo-wordmark-mark{border-radius:0;background:none;object-fit:contain;object-position:center}

/* Оплата: переключатели (Telegram/Email, СБП/Крипта) тем же шрифтом, что подписи «Куда
   доставить»/«Оплата» и кнопка — Nunito. В дизайн-системе .avo-segmented-item на Manrope,
   и рядом с заголовками на Nunito это читалось как разнобой. Срок подписки — так же (инлайн). */
.avo-checkout-cols .avo-segmented-item{font-family:var(--font-display);font-weight:700}
.avo-checkout-cols .avo-segmented-item[aria-selected="true"]{font-weight:800}
.avo-js .avo-prerender{visibility:hidden}

/* Страницы документов (/terms.html, /privacy.html, /refund.html): колонка для чтения на фоне
   сайта, вкладки между документами, карточки «можно/нельзя» и шаги из старой вёрстки. */
.avo-legal{max-width:760px;margin:0 auto;padding:40px 20px 72px;box-sizing:border-box;color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);line-height:1.65}
body:has(.avo-legal){background:var(--flesh-100)}
.avo-legal-eyebrow{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--avo-600)}
.avo-legal-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.01em;margin:8px 0 6px}
.avo-legal-date{color:var(--text-muted);font-size:var(--text-sm)}
.avo-legal-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 8px;padding:5px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);width:max-content;max-width:100%;box-sizing:border-box}
.avo-legal-tabs a{padding:9px 16px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--avo-900);text-decoration:none;white-space:nowrap}
.avo-legal-tabs a:hover{background:var(--flesh-100)}
.avo-legal-tabs a[aria-current="page"]{background:var(--avo-900);color:#fff}
.avo-legal-body{margin-top:12px}
.avo-legal-body h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);line-height:1.25;margin:34px 0 10px;color:var(--avo-900)}
.avo-legal-body p,.avo-legal-body li{color:var(--text-secondary)}
.avo-legal-body p{margin:0 0 12px}
.avo-legal-body ul{margin:0 0 14px;padding-left:22px}
.avo-legal-body li{margin:4px 0}
.avo-legal-body strong{color:var(--text-primary)}
.avo-legal-body a,.avo-legal-note a{color:var(--avo-700);text-underline-offset:2px}
.avo-legal-body table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:var(--text-sm);background:var(--bg-surface);border-radius:var(--radius-md);overflow:hidden}
.avo-legal-body th,.avo-legal-body td{padding:10px 12px;border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
.avo-legal-body th{font-family:var(--font-display);font-weight:800;color:var(--avo-900);background:var(--avo-100)}
.avo-legal-body .note,.avo-legal-body .highlight{background:var(--avo-100);border-radius:var(--radius-md);padding:14px 16px;margin:12px 0 16px;color:var(--text-primary)}
.avo-legal-body .card{border-radius:var(--radius-lg);padding:16px 18px;margin:10px 0 14px;background:var(--bg-surface);border:1px solid var(--border-subtle)}
.avo-legal-body .card.yes{border-left:4px solid var(--avo-600)}
.avo-legal-body .card.no{border-left:4px solid var(--coral-600)}
.avo-legal-body .card-title{font-family:var(--font-display);font-weight:800;margin-bottom:6px;color:var(--text-primary)}
.avo-legal-body .step{display:flex;gap:14px;align-items:flex-start;margin:12px 0}
.avo-legal-body .step-num{flex:0 0 34px;height:34px;border-radius:50%;background:var(--avo-900);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800}
.avo-legal-body .step-title{font-family:var(--font-display);font-weight:800;color:var(--text-primary)}
.avo-legal-body .step-desc{color:var(--text-secondary)}
.avo-legal-note{margin-top:28px;font-size:var(--text-xs);color:var(--text-muted)}
@media (max-width:640px){.avo-legal{padding-top:24px}.avo-legal-body table{font-size:var(--text-xs)}.avo-legal-body th,.avo-legal-body td{padding:8px 7px;hyphens:auto;overflow-wrap:break-word}
/* Вкладки документов — одной лентой с прокруткой вбок: переносом первая вкладка уезжала
   в отдельную строку и ряд выглядел сломанным. */
.avo-legal-tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.avo-legal-tabs::-webkit-scrollbar{display:none}
.avo-legal-tabs a{flex:0 0 auto;padding:9px 14px}}

/* Моноширинный IBM Plex Mono больше не грузим: он стоял только у IP, счётчика палубы и
   номеров шагов — ради них тянулись два файла (~24 КБ). Берём основной шрифт с табличными
   цифрами: они одной ширины, поэтому счётчик и адрес не «дышат» при смене цифр. */
:root{--font-mono:var(--font-body)}
.avo-ipbar,.avo-deck-count,.avo-cn-tab-no,.avo-dp-num,.avo-dp-switch b,.avo-rail-controls>span{font-variant-numeric:tabular-nums}

/* Страницы документов: место под шапку резервируем заранее — React ставит её после загрузки,
   и без этого текст прыгал вверх-вниз при каждом переходе между документами. Заголовку даём
   высоту двух строк, чтобы вкладки стояли на одном месте на всех трёх страницах. */
#avo-legal-nav{min-height:65px}
.avo-legal-head h1{min-height:2.2em}
/* Футер здесь светлый, как на страницах возможностей: на тёмной подложке его тексты
   (они окрашены в --text-secondary) сливались с фоном. */
#avo-legal-footer .avo-footer{background:var(--flesh-100);color:var(--text-secondary);border-top:1px solid var(--border-subtle)}
#avo-legal-footer .avo-footer a{color:var(--text-secondary)}
#avo-legal-footer .avo-footer a:hover{color:var(--avo-800);text-decoration:underline;text-underline-offset:4px}



/* Надпись «avocadoVPN» — контуры в SVG (ru/assets/brand/wordmark.svg, сделан из Baloo 2
   скриптом tools/wordmark-svg.py). Сам шрифт больше не грузится: он весил 66 КБ и держался
   ради одного слова, а картинка — 2 КБ в сжатом виде и остаётся чёткой на любом экране.
   Текст остаётся в разметке для поиска и читалок, просто уводится за край. Размеры в em,
   поэтому надпись следует за font-size в шапке (23/20/17 px) и в футере (22/17 px). */
:root{
  /* Baloo 2 убран из обоих списков: он тянулся запасным вариантом для латиницы, а держался
     ради одной надписи, которая теперь SVG. Кириллицы в нём и не было. */
  --font-display:'Nunito',ui-rounded,'Segoe UI',sans-serif;
  --font-brand:'Nunito',ui-rounded,'Segoe UI',sans-serif}
.avo-wordmark-type,.avo-wordmark-svg{
  display:inline-block;width:5.636em;height:.677em;
  background:url('/assets/brand/wordmark.svg?v=29f0af6858a66dd1820ff5ed28683b161b9c6a10') no-repeat left center;background-size:contain;
  color:transparent;text-indent:-100em;overflow:hidden;white-space:nowrap}

/* На палубе (десктоп) экран тарифов не прокручивается — всё обязано поместиться. После того
   как подписи встали над переключателями, колонка вылезала на 45px, поэтому в этом режиме
   блок оплаты компактнее: меньше отступы, ниже поле и пузырьки. */
.avo-deck .avo-pricing .avo-checkout-cols{gap:6px}
.avo-deck .avo-pricing .avo-checkout-deliver{gap:6px}
.avo-deck .avo-pricing .avo-checkout-eyebrow{margin-bottom:2px!important}
.avo-deck .avo-pricing .avo-checkout-contact .avo-input{height:36px}
.avo-deck .avo-pricing .avo-checkout-cols .avo-segmented{padding:3px}
.avo-deck .avo-pricing .avo-checkout-cols .avo-segmented-item{padding-block:6px}
/* Панель и кнопка внутри неё заданы инлайном в CheckoutPanel.jsx, поэтому на палубе
   поджимаем их отсюда — иначе экран тарифов всё ещё прокручивался бы на 21px. */
.avo-deck .avo-pricing div:has(> .avo-checkout-cols){padding:10px!important;margin-top:6px!important}
.avo-deck .avo-pricing .avo-checkout-cols + .avo-btn{margin-top:8px!important}
.avo-deck .avo-pricing div:has(> .avo-checkout-cols) + p{margin-top:6px!important}


/* Отзывы — сообщения из Telegram (ReviewsSection.jsx). Светлая тема Telegram: белый пузырь
   с хвостиком снизу слева, имя цветом, аватарка у нижнего края пузыря. */
.avo-tg{display:flex;align-items:flex-end;gap:8px;margin:0;min-width:0;text-align:left}
.avo-tg-ava{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;isolation:isolate}
/* Размытый «портрет»: слой шире круга, чтобы блюр не давал светлой каймы по краю. */
.avo-tg-ava>span{position:absolute;inset:-5px;filter:blur(3.5px) saturate(1.05)}
.avo-tg-bubble{position:relative;flex:1 1 auto;min-width:0;background:#fff;border-radius:16px 16px 16px 4px;
  padding:8px 12px 10px;box-shadow:0 1px 1px rgba(38,52,29,.08),0 1px 3px rgba(38,52,29,.05)}
.avo-tg-bubble::before{content:'';position:absolute;left:-6px;bottom:0;width:10px;height:14px;background:#fff;
  clip-path:polygon(100% 0,100% 100%,0 100%);border-bottom-left-radius:2px}
.avo-tg-name{display:block;font-size:13px;font-weight:800;line-height:1.3;margin:0 0 2px}
.avo-tg blockquote{margin:0;font-size:14.5px;line-height:1.45;color:#1f2a1a}
@media(max-width:1023px){
  .avo-tg blockquote{font-size:16px;line-height:1.5}
  .avo-tg-bubble{padding:10px 14px 12px}
}

/* Десктоп: две бесконечные ленты навстречу друг другу. Сдвиг ровно на одну копию сообщений
   (половина дорожки плюс половина зазора), поэтому шов не виден. Края растворяются маской и
   размываются: backdrop-filter видит только то, что внутри ленты, — маска делает её корнем. */
.avo-tg-marquee{--tg-gap:14px;position:relative;display:flex;flex-direction:column;gap:var(--tg-gap);width:100%;
  overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.avo-tg-marquee::before,.avo-tg-marquee::after{content:'';position:absolute;top:0;bottom:0;width:16%;z-index:1;
  pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.avo-tg-marquee::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.avo-tg-marquee::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.avo-tg-row{display:flex}
.avo-tg-track{display:flex;align-items:flex-end;gap:var(--tg-gap);width:max-content;
  animation:avo-tg-scroll 80s linear infinite;will-change:transform}
.avo-tg-row--rev .avo-tg-track{animation-direction:reverse;animation-duration:95s}
.avo-tg-track>.avo-tg{flex:0 0 300px}
.avo-tg-marquee:hover .avo-tg-track{animation-play-state:paused}
@keyframes avo-tg-scroll{to{transform:translateX(calc(-50% - var(--tg-gap) / 2))}}
@media (prefers-reduced-motion:reduce){.avo-tg-track{animation:none}}
/* Лента шире колонки заголовка: две строки сообщений читаются, когда видно больше двух. */
.avo-deck .avo-reviews-copy{width:min(680px,100%)}
.avo-deck .avo-reviews-copy .avo-tg-marquee{margin-top:4px}

/* Надпись avocadoVPN внутри текста шага подключения: кегль строки и её базовая линия — крупнее
   она раздвигала межстрочный интервал. */
.avo-inline-wordmark{font-size:1em;vertical-align:baseline}
/* Отзывов десять — точки на обычном шаге (24 px) выталкивали стрелки за край узкого экрана. */
@media(max-width:1023px){.avo-review-rail .avo-rail-dots button{width:15px}}

/* Страницы возможностей: разделы под запрос страницы и «Частые вопросы» (DetailPage.jsx). */
.avo-dp-h2--sub{font-size:clamp(19px,1.8vw,24px);margin:30px 0 10px}
.avo-dp-text{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-secondary);margin:0 0 14px;text-wrap:pretty}
.avo-dp-note{margin-top:18px}
.avo-dp-faq-item{padding:14px 0;border-top:1px solid var(--border-subtle)}
.avo-dp-faq-item h3{font-family:var(--font-display);font-size:var(--text-base);font-weight:800;line-height:var(--leading-snug);margin:0 0 6px;color:var(--text-primary)}
.avo-dp-faq-item p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);margin:0}

/* Отзывы на телефоне: каждое сообщение своей высоты и прижато к верху ленты — короткое
   сообщение больше не висит внизу под пустым местом, оставленным самым длинным. */
@media(max-width:1023px){
  .avo-review-rail .avo-mobile-rail{align-items:flex-start!important}
  .avo-reviews .avo-col>.avo-h2{margin-bottom:18px!important}
}

/* Футер последнего экрана (FooterOverlay): панель перелистывания стоит внизу по центру и
   никуда не уезжает, поэтому средняя колонка футера пустая — ровно под панель. Разделы слева,
   документы справа, «Поддержка» и «Вопросы и ответы» строкой ниже — лесенка. */
.avo-footer-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:8px 0;width:100%;align-items:center}
.avo-footer-grid nav{display:flex;flex-wrap:wrap;gap:6px 18px;min-width:0}
.avo-footer-grid .avo-fg-l{grid-column:1}
.avo-footer-grid .avo-fg-r{grid-column:3;justify-content:flex-end;text-align:right}
.avo-footer-grid .avo-fg-meta{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:var(--text-xs);color:var(--text-secondary)}

/* Хлебные крошки страниц возможностей (DetailPage.jsx). */
.avo-dp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:var(--text-sm);color:var(--text-secondary)}
.avo-dp-crumbs li{display:inline-flex;align-items:center}
.avo-dp-crumbs li+li::before{content:'›';margin:0 8px;color:var(--text-muted)}
.avo-dp-crumbs a{color:var(--avo-700);text-decoration:none;font-weight:600}
.avo-dp-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.avo-dp-crumbs [aria-current]{color:var(--text-primary);font-weight:700}

/* Карточка шага — с той же лёгкой тенью, что карточка «Возможностей» (на зелёном фоне
   крупная тень shadow-lg читалась серой подложкой вокруг карточки). */
.avo-deck .avo-cn-plate{box-shadow:0 8px 18px -12px rgba(32,47,22,.25)!important}
@media(max-width:600px){.avo-dp-crumbs ol{font-size:13px}.avo-dp-crumbs li+li::before{margin:0 6px}}

/* ───────── Типографика лендинга (ревью 25.09) ─────────
   Контраст: основной текст темнее (#3b3a36 вместо #484942), вторичный — #5f5e58 вместо
   #75766c: у прежнего на цветных фонах блоков было 3.7–4.3:1, теперь не ниже 5.2:1 на любом
   из них (самый тёмный — фон пробного доступа #e6e8cb). Токены экспорта Design не правим —
   переопределяем здесь, как и шрифты выше. */
:root{--text-secondary:#3b3a36;--text-muted:#5f5e58}
/* Заголовки — без автопереносов и ровными строками (без висячего «вкус»), абзацы — без
   одинокого слова в последней строке. */
h1,h2,h3{hyphens:manual;text-wrap:balance}
p,blockquote{text-wrap:pretty}

/* Хиро: подзаголовок и строка тарифов лежат на фото — плотнее и темнее. */
.avo-hero-sub,.avo-hero-note{font-weight:500;color:#2f2e2a}
/* Десктоп: фото масштабируется от правого края (cover), и на окнах 16:10 (1440×900,
   1280×800) роутер уезжал под конец строки подзаголовка. Строка короче — кончается до
   роутера, а под всей текстовой колонкой мягкая светлая подложка в тон стены (#dec7b7 с
   кадра, только светлее): текст читается, даже когда кадр под ним пёстрый. Подложка — слой
   поверх фото внутри .avo-hero-bg, копия выше неё. */
@media (min-width:1024px){
  .avo-hero-sub{max-width:25em}
  .avo-hero-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 58% 78% at 16% 52%,rgba(243,231,220,.86) 0%,rgba(243,231,220,.7) 38%,rgba(243,231,220,.32) 66%,rgba(243,231,220,0) 100%)}
}

/* Ссылки — два стиля. Навигационная (со стрелкой, ведёт на другую страницу) и ссылка внутри
   абзаца (без стрелки): один зелёный, сплошное подчёркивание 1.5px с отступом 3px. */
.avo-link,.avo-inlink{color:var(--avo-700);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.avo-link:hover,.avo-inlink:hover{color:var(--avo-800);text-decoration:underline}
.avo-link{font-weight:var(--weight-semibold);white-space:nowrap}

/* Карточка «Возможностей»: kicker → H3 → абзац → строка-факт → ссылка. Строка-факт — пункты
   через « · », перенос только между пунктами. Ссылка в ленте прижата к низу карточки —
   у всех пяти на одной высоте. */
.avo-fact{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted);margin:0}
.avo-fact>span{white-space:nowrap}
.avo-fc-text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.avo-fc-more{margin-top:auto;padding-top:14px;align-self:flex-start}
.avo-flow .avo-features-flow .avo-features-card>.avo-fc-text{display:flex!important}

/* ───────── Плашки хиро: видно, что они раскрываются ─────────
   Справа «+», как у вопросов FAQ; открытая плашка (на десктопе — и наведённая) поворачивает
   его в «×». Один раз после появления плашки по очереди подсвечиваются обводкой и качают «+»
   (два круга, дальше тишина) — подсказка снимается первым же касанием или наведением.
   Обводка — отдельный слой ::after: на телефоне цвет рамки плашки задан с !important, и
   анимация его не перекрыла бы. */
.avo-hf{cursor:pointer}
.avo-hf-plus{margin-left:auto;flex:none;color:var(--avo-600);transition:transform var(--duration-base) var(--ease-bounce)}
.avo-hf--open .avo-hf-plus{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .avo-hf:hover .avo-hf-plus,.avo-hf:focus-visible .avo-hf-plus{transform:rotate(45deg)}
}
.avo-hf--nudge::after{content:'';position:absolute;inset:-1.5px;border-radius:16px;pointer-events:none;
  border:1.5px solid var(--avo-600);box-shadow:0 0 0 4px rgba(79,114,56,.16);opacity:0;
  animation:avoHfNudge 3.2s var(--ease-out) calc(1200ms + var(--hf-i,0) * 450ms) 2 both}
.avo-hf--nudge .avo-hf-plus{animation:avoHfPlus 3.2s var(--ease-out) calc(1200ms + var(--hf-i,0) * 450ms) 2 both}
@keyframes avoHfNudge{0%,30%,100%{opacity:0}12%{opacity:1}}
@keyframes avoHfPlus{0%,30%,100%{transform:none}12%{transform:rotate(90deg) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.avo-hf--nudge::after,.avo-hf--nudge .avo-hf-plus{animation:none}}

/* Телефон: плашки не во всю ширину, а одной общей ширины по самой длинной подписи; нажатая
   раскрывается во всю ширину — описанию нужно место. */
@media (max-width:1023px){
  .avo-hero-cards{align-items:flex-start}
  .avo-hero-cards .avo-hf-slot{width:min(100%,220px);transition:width 260ms var(--ease-out)}
  .avo-hero-cards .avo-hf-slot.is-open,.avo-hf-measure .avo-hf-slot{width:100%}
}