/* Общая база всех страниц RenderFox.
   Подключается первым в <head>; постраничный <style> идёт после и уточняет то,
   что нужно конкретной странице. Раньше всё это было скопировано в шесть файлов. */

/* ── Шрифты ──────────────────────────────────────────────────────────────
   Лежат у нас. Раньше их отдавал fonts.googleapis.com, и первая отрисовка
   ждала ответа чужого домена. Наборы символов те же, что отдавал Google:
   latin + latin-ext + cyrillic, переменное начертание 100–900. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geistmono-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geistmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geistmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── База ─────────────────────────────────────────────────────────────── */
html{background:#FCEBDE;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:#FCEBDE;color:#311D1C;font-family:"Geist","Geist Mono",system-ui,sans-serif;font-weight:420;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
a{color:#EA6029;text-decoration:none}
a:hover{color:#311D1C}
::selection{background:#EA6029;color:#FCEBDE}
button,input{font:inherit;color:inherit}

/* ── Видимый фокус с клавиатуры ───────────────────────────────────────────
   Браузерный outline теряется на картинках и на светлом фоне, поэтому
   рисуем свой: тёмный контур плюс светлый ореол, чтобы читался везде. */
:focus-visible{outline:2px solid #311D1C;outline-offset:2px;border-radius:4px}
[data-arrow]:focus-visible,[data-lbarrow]:focus-visible,[data-lbclose]:focus-visible,[data-dot]:focus-visible{outline:2px solid #FCEBDE;outline-offset:2px;box-shadow:0 0 0 4px rgba(49,29,28,.55)}
[data-dot]:focus-visible{outline-offset:3px}
[data-go]:focus-visible,[data-navlink]:focus-visible{outline-offset:0;background:rgba(234,96,41,.16)}

/* ── Общие куски шапки ────────────────────────────────────────────────── */
[data-hdr]::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:320px;background:#FCEBDE;pointer-events:none}
@media(min-width:1001px){[data-hdrlinks]{display:flex!important}}
[data-sidescroll]::-webkit-scrollbar,[data-suggscroll]::-webkit-scrollbar{width:6px}
[data-sidescroll]::-webkit-scrollbar-thumb,[data-suggscroll]::-webkit-scrollbar-thumb{background:rgba(49,29,28,.24);border-radius:3px}

/* ── Поиск в шапке на телефоне ────────────────────────────────────────────
   Поле держим в одной строке с логотипом: на «примерах» название длиннее,
   чем на «ценах», и поле уезжало на вторую строку — шапки выглядели
   по-разному. Даём полю сжиматься, а при наборе убираем название совсем:
   строка отдаётся поиску, остаётся только лисёнок.
   16px у поля — не украшение: при меньшем кегле Safari масштабирует
   страницу, как только курсор попадает в поле. */
@media(max-width:1000px){
  /* Без nowrap флексбокс переносит поле на вторую строку раньше, чем начнёт
     что-либо сжимать. Ссылок в шапке на этой ширине нет, переносить нечего. */
  [data-hdrrow]{flex-wrap:nowrap!important}
  [data-searchbox]{flex:1 1 120px!important;min-width:96px!important}
  [data-search]{font-size:16px!important;padding-top:7px!important;padding-bottom:7px!important}
  /* Логотип со строкой названия сжимается, а не выталкивает поле на вторую
     строку: на 320px название усекается многоточием. */
  [data-hdrrow]>a:first-child{flex:0 1 auto!important;min-width:0}
  [data-hdrname]{display:inline-block;min-width:0;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:max-width .26s cubic-bezier(.22,.61,.36,1),opacity .16s ease,margin-left .26s cubic-bezier(.22,.61,.36,1)}
  [data-hdrrow]:focus-within [data-hdrname]{max-width:0;opacity:0;margin-left:-9px}
}

/* ── Нижний блок «Открыть бот / Поддержка» ────────────────────────────────
   На узком экране кнопки в исходном виде не помещались в строку и падали
   друг под друга. Ужимаем их и кладём в одну строку: слева растягивается
   основная, справа «Поддержка» по своему размеру. */
@media(max-width:620px){
  [data-cta]{gap:12px!important;padding:16px 16px 15px!important}
  [data-cta] p{flex:1 1 100%!important;font-size:.84rem!important}
  [data-ctabtns]{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;width:100%;flex-wrap:nowrap!important}
  [data-ctabtns] a{justify-content:center;padding:12px 8px!important;font-size:.72rem!important;border-radius:12px!important;white-space:nowrap;gap:5px!important}
}
@media(max-width:400px){
  [data-ctabtns] a{padding:11px 6px!important;font-size:.66rem!important;gap:4px!important}
}
@media(max-width:344px){
  [data-ctabtns] a{font-size:.6rem!important}
}

/* ── Большое превью на телефоне ───────────────────────────────────────────
   Стрелки в 46px съедали заметную часть узкого экрана и лезли на кадр. */
@media(max-width:620px){
  [data-lbarrow]{width:26px!important;height:26px!important;border-width:1px!important}
  [data-lbarrow="-1"]{left:5px!important}
  [data-lbarrow="1"]{right:5px!important}
  [data-lbarrow] svg{width:13px;height:13px;stroke-width:2.6}
}

/* ── Заголовок группы внутри карточки ────────────────────────────────────
   Матриц на странице больше нет: карточка с режимами и карточка без них
   собраны одной вёрсткой — список строк «вариант → цена», а режим стал
   подзаголовком группы. Раньше это делалось только на телефоне и только
   средствами CSS поверх матрицы; теперь так везде и в самой разметке.
   Черта до правого края отбивает группы, не добавляя ещё одной рамки. */
/* Заголовок группы легко было проглядеть: он шёл под opacity:.55, и на
   фоне жирных цен режим терялся. Прибавляем ему веса — но через цвет,
   а не через непрозрачность: opacity тянула бы за собой и черту справа,
   а она должна остаться тихой. Верхний регистр и разрядка и так держат
   заголовок во втором плане, так что вес 700 его в главные не выводит. */
[data-group]{opacity:1!important;color:rgba(49,29,28,.74);font-weight:700!important}
[data-group]::after{content:"";flex:1 1 auto;height:1px;background:rgba(49,29,28,.15)}
/* Отбивка между группами нужна, а перед первой — нет: там уже есть отступ
   от строки «Цена за 1 секунду видео». Без этого карточка с режимами
   отодвигала список на 25px, а карточка без режимов — на 10px, и соседние
   карточки в ленте стояли вразнобой. !important обязателен: инлайновая
   margin в разметке иначе перебивает правило. */
[data-list]>[data-group]:first-child{margin-top:0!important}

/* ── Воздух под названием у карточек без строки-подзаголовка ──────────────
   У видеомоделей между шапкой и телом стоит «Цена за 1 секунду видео»,
   и она же даёт отбивку. У всех семнадцати карточек с изображениями такой
   строки нет, и список начинался вплотную к названию — 0px, название
   касалось первой цены.
   Соседний селектор ловит именно эти карточки: список идёт сразу за шапкой,
   а там, где подзаголовок есть, между ними стоит <p> и правило не срабатывает.

   Повторять полное расстояние от шапки до тела (34px) нельзя: у видео эти
   пиксели заняты строкой подзаголовка, а у изображений остались бы чистой
   дырой, и карточка выглядела разреженной. Совпадать должен пустой зазор —
   те самые 10px, что у видео идут от подзаголовка до первой линии. Отступ
   подзаголовка от ширины экрана не зависит, поэтому значение одно на всех. */
[data-model]>div+[data-list]{margin-top:10px!important}

/* Уточнение внутри подписи строки — режим рядом с разрешением. Кегль и
   начертание легче, чтобы режим не спорил с разрешением, но цвет обычный:
   это такая же часть подписи, а не служебная пометка. */
[data-sub]{font-style:normal;font-weight:500;font-size:.86em;
  letter-spacing:.06em;margin-right:9px}

/* ── Кегль карточек на десктопе ───────────────────────────────────────────
   Инлайновые размеры в разметке рассчитывались на матрицу, где в строку
   помещалось шесть колонок. В вертикальном списке строка одна, и тот же
   кегль стал мелким для широкой карточки. Телефон не трогаем — там своя
   шкала ниже. */
@media(min-width:621px){
  [data-model] h3{font-size:1.14rem!important}
  [data-model]>p{font-size:.84rem!important}
  [data-from]{font-size:.8rem!important}
  [data-group]{font-size:.74rem!important}
  [data-l]{font-size:.98rem!important}
  [data-v]{font-size:1.08rem!important}
  [data-u]{font-size:.76rem!important}
  [data-model] em{font-size:.78rem!important}
}

/* ── Старая цена рядом с новой ────────────────────────────────────────────
   Зачёркнутое число должно читаться как справка, а не как второй тариф:
   легче по начертанию, глуше по цвету и на кегль меньше действующей цены. */
[data-old]{margin-right:9px;font-weight:500;font-size:.82em;
  color:rgba(49,29,28,.42);text-decoration:line-through}

/* ── Врезка под заголовком ────────────────────────────────────────────────
   Текст врезки один и тот же на всех ширинах — сокращённый вариант для
   телефона убран. Каждое предложение обязано остаться целой строкой, поэтому
   nowrap, а переносы задаёт только <br>.
   Чтобы длинная строка влезла на узком экране, кегль считается от ширины
   самой врезки: 53 знака моноширинного Geist Mono занимают ровно 31.8 кегля,
   отсюда делитель (с запасом в пару процентов). Меряем в cqw, а не в vw:
   полоса прокрутки настольного браузера входит в vw, но не в ширину колонки,
   и запас съедался бы ею. Контейнер — колонка с заголовком.
   Верхняя граница .75rem совпадает с настольным кеглем: с ~460px и шире
   формула его перерастает, и врезка выглядит как на десктопе. */
[data-heronotebox]{container-type:inline-size}
[data-heronote]{white-space:nowrap}
@media(max-width:620px){
  [data-heronote]{padding:9px 12px!important;font-size:min(.75rem,(100cqw - 30px)/32.8)!important}
}

/* ── Карточки тарифов на узком экране ─────────────────────────────────────
   Раньше здесь жила целая система, разворачивавшая матрицу в список: она
   прятала шапку столбцов, подставляла разрешение из data-c и переопределяла
   каждую ячейку. Всего этого больше нет — матрицу убрали из разметки, и
   вертикальный список теперь один на все ширины. Осталось только то, что
   действительно зависит от ширины экрана: кегль. */
@media(max-width:620px){
  [data-model]{min-width:0}

  /* ── Кегль в карточках тарифов ──────────────────────────────────────────
     Одна шкала на все карточки, иначе в ленте скачет размер шрифта.
     Роли размечены в разметке (data-l, data-v, data-u, data-from, data-group):
     цепляться за inline-размеры нельзя — support.js пересобирает атрибут
     style, и «font-size:.86rem» превращается в «font-size: 0.86rem». */
  [data-model] h3{font-size:.88rem!important}
  [data-model]>p{font-size:.68rem!important}
  [data-from]{font-size:.64rem!important}
  [data-group]{font-size:.62rem!important}
  [data-l]{font-size:.76rem!important}
  [data-v]{font-size:.8rem!important}
  [data-u]{font-size:.56rem!important}
  [data-model] em{font-size:.62rem!important;padding:1px 5px!important}
  /* Длинное пояснение под тарифом. Рамку и отступы держим такими же, как на
     десктопе, кегль — как у соседней сноски про «upscaled» (.68rem задаёт
     правило [data-model]>p выше). Целиком текст занимал шесть строк, поэтому
     на телефоне сноска свёрнута до первой строки и раскрывается нажатием.
     Состояние ставит __rfInit на странице: там же замеры высоты и стрелка,
     потому что до auto высоту средствами CSS кроссбраузерно не анимировать.
     Разметка о свёрнутом состоянии ничего не знает — на десктопе этих
     атрибутов нет, и весь блок ниже не действует. */
  [data-note]{
    font-size:.68rem!important;line-height:1.5!important;text-wrap:pretty;
    position:relative;overflow:hidden;
    transition:height .24s cubic-bezier(.22,.61,.36,1)}
  /* Место под стрелку резервируем отступом самой врезки, а не текста: иначе
     при раскрытии отступ остался бы у каждой строки, а не только у первой. */
  [data-note][role="button"]{padding-right:31px!important;cursor:pointer}
  /* Обрезка живёт на отдельном атрибуте, а не на data-noteopen: при закрытии
     её надо включать только в конце перехода, иначе текст схлопнется в одну
     строку раньше, чем врезка успеет уехать вверх. */
  [data-noteclamp] [data-notebody]{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  /* Шеврон — повёрнутый квадрат с двумя гранями, а не иконка: вставленный
     из JS <svg> терял viewBox, его camelCase переписывает support.js.
     У псевдоэлемента переписывать нечего. Высота в 1.5em равна строке текста,
     поэтому стрелка стоит по центру первой строки в любом состоянии. */
  [data-notearrow]{
    position:absolute;top:11px;right:11px;width:11px;height:1.5em;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;opacity:.55;
    transition:transform .24s cubic-bezier(.22,.61,.36,1)}
  [data-notearrow]::before{
    content:"";width:7px;height:7px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    /* Повёрнутый квадрат оптически сидит ниже своего бокса — приподнимаем. */
    transform:translateY(-2px) rotate(45deg)}
  [data-noteopen="1"] [data-notearrow]{transform:rotate(180deg)}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  /* Раскрытие сноски остаётся, мгновенным его делает calm() в __rfInit;
     здесь гасим сам переход, чтобы стрелка не доворачивалась отдельно. */
  [data-note],[data-notearrow]{transition:none!important}}

/* ── Подвал ───────────────────────────────────────────────────────────────
   Одна строка: копирайт и два документа через точки. Точка — отдельный узел,
   а не часть ссылки: иначе она подсвечивалась бы вместе с ней на наведении.
   На узком экране строка ломается на части — там точки убираем совсем,
   иначе одна из них начинала бы строку. Порог 600px: с этой ширины строка
   с точками помещается в одну. */
[data-legal] [data-dot]{color:rgba(49,29,28,.38);user-select:none}
@media(max-width:599px){
  /* Без точек копирайт и первая ссылка сливались в одну фразу — разводим их
     увеличенным зазором. */
  /* !important: зазор задан инлайном, а инлайн перебивает таблицу стилей. */
  [data-legal]{gap:2px 18px!important}
  [data-legal] [data-dot]{display:none}
}
