/*
Theme Name: Просто Космос Ru
Description: Тема сайта prostokosmos.help. Язык дизайна — «Диафильм».
Version: 1.2.0
Author: —
*/

/* ============================================================
   КОНТРАКТ НАПРАВЛЕНИЯ — «ДИАФИЛЬМ»
   Выбран владельцем 17.09.2026 из четырёх показанных вариантов.
   Ключ броска impeccable: 5df58942, раздача 4-5-6, вёл кадр 4.

   THESIS. Сайт объясняет порядок действий, которого нет ни у офсайта,
   ни у конкурентов: у бренда нет приложения, доступ выдаётся ключом из
   бота, вставленным в чужой клиент. Значит несущая форма — не карточка
   и не таблица, а лента кадров: один кадр — один шаг или одно число.
   Сайт отказывается от щита с глобусом и от плиток «скорость, серверы,
   устройства», которыми размечена вся ниша.

   OWN-WORLD. Тёмное полотно #14141a — оно взято с тёмной зоны офсайта.
   Лента: пунктирные направляющие сверху и снизу, перфорация квадратами
   по краям, кадр — прямоугольник с рамкой 1px и номером в углу. Подпись
   под кадром набрана Shantell Sans, всё остальное — Libertinus Serif. Оранжевый
   #ff7300 с офсайта горит ровно в одном кадре ленты и на кнопке.
   Сайт узнаётся с убранным текстом по перфорации и по ряду кадров.

   STORY. Человек проходит ленту слева направо: видит цену за свой срок,
   понимает, что приложение нужно стороннее, и уходит в бота за ключом.

   FIRST VIEWPORT. Заголовок и лид во всю ширину, под ними лента из
   четырёх кадров. Кнопка перехода в бота стоит в шапке и сразу под лидом,
   вне бургера, на любой ширине.

   FORM. Кадр: номер, значение, подпись. Из кадров собраны тарифы, шаги
   подключения, платформы, проверки и оценка по пунктам.

   РАЗВОДКА С СОСЕДЯМИ ПО НИШЕ (снято по коду тем сервера 17.09.2026):
   - durev-vpn.info — окно сплитов .board в .lead/.hull; у нас ленты кадров
     и другой порядок секций, контейнер 1440 против 1480;
   - atlanta-vpn.info — реестр строк .node в .deck/.lane, весь интерфейс
     моноширинным; у нас ни одной моноширинной строки и нет реестра;
   - flyvpn.help — щит .crest__shield; щита нет;
   - vpn360.help — .hero с плитками .hero__facts; плиток фактов нет,
     числа живут внутри кадров ленты;
   - nashvpn-help — строка тарифа .fare__row; тарифы идут кадрами;
   - potato-info — .stage со сплитом текст/картинка; первый экран
     во всю ширину, без правой колонки;
   - ops-vpn.info — .sec/.shell и Tilda Sans; у нас .scene/.gate, Libertinus.
   Имена классов взяты от плёнки: .gate, .reel, .frame, .cue, .rail, .tail.
   Ни одно из них не встречается в темах соседей.

   ШРИФТЫ, пересняты сканом тем сервера 18.09.2026 перед самой записью.
   Tinos из брифа за ночь занял сосед ipweb.help (тема собрана 17.09.2026
   в 19:04, fonts/ipw-tinos-400.woff2 и -700), следующий кандидат Literata —
   bebravpn.click. Основной шрифт — Libertinus Serif 400/700: в сетке
   свободен (занят только Libertinus Sans у fkeyvpn.info), кириллица без
   пропусков и знак N проверены по cmap подмножества. Знака рубля нет ни в
   одной сборке Libertinus, он приезжает отдельным лицом из Kurale по
   unicode-range, см. fonts/fonts.css. Shantell Sans свободен, остаётся
   на подписях под кадрами.
   ============================================================ */

:root{
  --ink:#14141a;          /* полотно */
  --ink-2:#1c1b23;        /* кадр */
  --ink-3:#22212a;        /* перфорация, подложка таблиц */
  --line:#3d3b48;         /* рамка кадра */
  --line-2:#4a4856;       /* направляющие ленты */
  --tx:#f2f0ea;           /* основной текст */
  --tx-2:#b6b3c1;         /* проза второго плана, 9,1:1 на полотне */
  --tx-3:#8d8a99;         /* номера кадров и мелкие метки, 5,5:1 */
  --lamp:#ff7300;         /* единственный акцент, с офсайта */
  --lamp-hi:#ff8b2d;      /* тот же акцент светлее, для крупных цифр */
  --hull:1440px;
  --gut:44px;
  --f-tx:'Libertinus Serif',Georgia,'Times New Roman',serif;
  --f-cue:'Shantell Sans',var(--f-tx);
  --r:0px;                /* один масштаб скруглений на весь сайт: прямые углы */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--f-tx);font-size:18px;line-height:1.62;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--tx)}
::selection{background:var(--lamp);color:var(--ink)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
html{scrollbar-color:var(--line) var(--ink)}

.gate{width:100%;max-width:var(--hull);margin:0 auto;padding:0 var(--gut)}
.prose{max-width:74ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--lamp);color:var(--ink);padding:8px 12px}

/* ── Кнопка ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;background:var(--lamp);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:16px;line-height:1.2;border:1px solid var(--lamp);
  border-radius:var(--r);white-space:nowrap;transition:transform .12s linear,background-color .12s linear}
.btn:hover{background:var(--lamp-hi);border-color:var(--lamp-hi);transform:translateY(-1px)}
.btn__short{display:none}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--line-2);font-weight:400}
.btn--ghost:hover{background:var(--ink-3);border-color:var(--tx-3);color:var(--tx)}
.btn--sm{padding:9px 14px;font-size:15px}

/* ── Шапка: направляющая плёнки ─────────────────────────── */
.rail{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:1px solid var(--line)}
.rail__in{display:flex;align-items:center;gap:26px;height:74px;max-width:var(--hull);margin:0 auto;padding:0 var(--gut)}
.mark{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;font-weight:700;font-size:20px;flex:0 0 auto}
.mark__dot{width:9px;height:9px;background:var(--lamp);display:inline-block}
.mark__tx{color:var(--tx)}
.rail__nav{display:flex;gap:19px;margin-left:auto;min-width:0}
.rail__nav a{color:var(--tx-2);text-decoration:none;font-size:16px;white-space:nowrap}
.rail__nav a:hover{color:var(--tx)}
.rail__nav a[aria-current="page"]{color:var(--tx);box-shadow:inset 0 -1px 0 var(--lamp)}
.rail__cta{flex:0 0 auto}
.burger{display:none;flex:0 0 auto;width:42px;height:38px;background:transparent;border:1px solid var(--line-2);color:var(--tx);cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger i{width:20px;height:20px}
.panel{display:none;border-top:1px solid var(--line);background:var(--ink);max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain}
.panel.is-lit{display:block}
.panel a{display:block;padding:13px var(--gut);border-bottom:1px solid var(--ink-3);color:var(--tx);text-decoration:none}
.panel a[aria-current="page"]{color:var(--lamp)}

/* ── Первый экран: титр ─────────────────────────────────── */
.title-card{padding:56px 0 8px}
.title-card h1{font-size:clamp(32px,4.4vw,58px);line-height:1.1;margin:0 0 18px;font-weight:700;max-width:21ch}
.title-card .lead{font-size:20px;line-height:1.55;color:var(--tx-2);margin:0 0 26px;max-width:66ch}
.acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.acts__note{font-family:var(--f-cue);font-size:15px;color:var(--tx-3)}

/* ── Лента и кадр ───────────────────────────────────────── */
.reel{margin:36px 0 0;padding:14px 0;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);
  background:
    repeating-linear-gradient(to right,var(--ink-3) 0 14px,transparent 14px 42px) top left/100% 7px no-repeat,
    repeating-linear-gradient(to right,var(--ink-3) 0 14px,transparent 14px 42px) bottom left/100% 7px no-repeat}
.reel__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:13px 0}
.reel__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.reel__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.frame{border:1px solid var(--line);background:var(--ink-2);padding:15px 16px 13px;min-width:0}
.frame--lit{border-color:var(--lamp)}
.frame__n{display:block;font-size:12px;letter-spacing:.13em;color:var(--tx-3)}
.frame__v{display:block;font-size:30px;line-height:1.16;font-weight:700;margin:5px 0 3px;overflow-wrap:break-word}
.frame--lit .frame__v{color:var(--lamp-hi)}
.frame__cue{display:block;font-family:var(--f-cue);font-size:15px;line-height:1.4;color:var(--tx-2)}
.reel__cap{font-family:var(--f-cue);font-size:15px;color:var(--tx-3);margin:12px 0 0}

/* ── Секции ─────────────────────────────────────────────── */
.scene{padding:54px 0}
.scene + .scene{border-top:1px solid var(--ink-3)}
.scene h2{font-size:clamp(25px,2.5vw,34px);line-height:1.2;margin:0 0 20px;font-weight:700;max-width:24ch}
.scene h3{font-size:21px;line-height:1.3;margin:28px 0 9px;font-weight:700}
.scene p{margin:0 0 15px}
/* Длинные русские слова («конфиденциальности») не влезают в узкий экран
   целиком и растягивают полотно: на 320px H1 требовал 333px против 294px
   доступных. Перенос по слогам с запасным разрывом внутри слова. */
.title-card h1,.lost h1,.scene h2,.scene h3{overflow-wrap:break-word;hyphens:auto}
.scene p:last-child{margin-bottom:0}
.muted{color:var(--tx-2)}

/* ── Шаги: те же кадры, но с текстом ────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{border:1px solid var(--line);background:var(--ink-2);padding:18px 18px 16px;min-width:0}
.step__n{display:block;font-size:12px;letter-spacing:.13em;color:var(--tx-3)}
.step b{display:block;font-size:19px;margin:6px 0 7px}
.step p{font-size:16px;color:var(--tx-2);margin:0}

/* ── Таблицы ────────────────────────────────────────────── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
th{text-align:left;font-weight:400;font-size:13px;letter-spacing:.09em;color:var(--tx-3);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
td{padding:14px 14px 14px 0;border-bottom:1px solid var(--ink-3);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
td b{font-size:19px}
.num{font-size:21px;font-weight:700;white-space:nowrap}
.win{color:var(--lamp-hi);white-space:nowrap}

/* ── Вопросы ────────────────────────────────────────────── */
.qa{border-top:1px solid var(--ink-3)}
.qa__i{border-bottom:1px solid var(--ink-3)}
.qa__i summary{cursor:pointer;padding:16px 0;font-size:19px;font-weight:700;list-style:none;display:flex;gap:12px;align-items:flex-start}
.qa__i summary::-webkit-details-marker{display:none}
.qa__i summary::before{content:"+";color:var(--tx-3);font-weight:400;flex:0 0 auto}
.qa__i[open] summary::before{content:"\2212"}
.qa__a{padding:0 0 16px 24px;color:var(--tx-2);max-width:78ch}
.qa__a p{margin:0}

/* ── Отзывы ─────────────────────────────────────────────── */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.voice{border:1px solid var(--line);background:var(--ink-2);padding:18px;min-width:0}
.voice__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.voice__who{font-weight:700}
.voice__date{font-family:var(--f-cue);font-size:14px;color:var(--tx-3);white-space:nowrap}
.voice p{font-size:16px;color:var(--tx-2);margin:9px 0 0}

/* ── Оценка ─────────────────────────────────────────────── */
.score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.score__n{font-size:58px;font-weight:700;line-height:1}
.marks{border-top:1px solid var(--ink-3)}
.mark-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:15px 0;border-bottom:1px solid var(--ink-3);align-items:baseline}
.mark-row b{font-size:18px}
.mark-row .m{font-size:20px;font-weight:700;white-space:nowrap}
.mark-row p{grid-column:1/-1;margin:5px 0 0;font-size:16px;color:var(--tx-2);max-width:82ch}

.star-rating{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.star-rating__bg,.star-rating__fg{display:flex;gap:2px}
.star-rating__bg{color:var(--tx-3);opacity:.4}
.star-rating__fg{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--lamp-hi)}
.star-rating svg{width:var(--star-size,18px);height:var(--star-size,18px);flex-shrink:0;fill:currentColor;stroke:currentColor}

/* ── Дальше по ленте ────────────────────────────────────── */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.next__i{border:1px solid var(--line);background:var(--ink-2);padding:16px;text-decoration:none;min-width:0;transition:border-color .12s linear}
.next__i:hover{border-color:var(--tx-3)}
.next__i b{display:block;font-size:18px;margin-bottom:5px}
.next__i span{display:block;font-family:var(--f-cue);font-size:15px;color:var(--tx-2)}

/* ── Крошки ─────────────────────────────────────────────── */
.crumbs{padding:20px 0 0;font-size:15px;color:var(--tx-3)}
.crumbs a{color:var(--tx-3)}
.crumbs__sep{margin:0 8px}
.crumbs__here{color:var(--tx-2)}

/* ── Хвост плёнки ───────────────────────────────────────── */
.tail{border-top:1px solid var(--line);margin-top:60px;padding:34px 0 40px;background:var(--ink-3)}
.tail__cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:34px}
.tail h3{font-size:16px;margin:0 0 12px;font-weight:700}
.tail__links a{display:block;color:var(--tx-2);text-decoration:none;padding:3px 0;font-size:16px}
.tail__links a:hover{color:var(--tx)}
.tail__go{margin-top:30px}
.tail__note{margin:14px 0 0;font-size:15px;color:var(--tx-3);max-width:70ch}
.tail__bar{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--tx-3)}

/* ── 404 ────────────────────────────────────────────────── */
.lost{padding:70px 0 40px}
.lost h1{font-size:clamp(30px,4vw,48px);margin:0 0 16px}

/* ══════════ БРЕЙКПОИНТЫ ══════════ */
@media (max-width:1320px){
  :root{--gut:32px}
  .rail__nav{gap:15px}
  .rail__nav a{font-size:15px}
}
@media (max-width:1120px){
  .rail__nav{display:none}
  .burger{display:inline-flex}
  .rail__in{gap:16px}
  .rail__cta{margin-left:auto}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  /* Ряд из трёх кадров сжимался до 163px на 561px, а доменное имя в кадре
     набрано 30px и требует около 230px: замер CDP давал 20px переполнения
     на /oficialnyy-sayt/. Ряды --3 и --2 сходятся в две колонки вместе с
     обычным рядом, а не на 260px ниже. */
  .reel__row,.reel__row--3,.reel__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tail__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:820px){
  :root{--gut:22px}
  body{font-size:17px}
  .title-card{padding:40px 0 6px}
  .voices{grid-template-columns:minmax(0,1fr)}
  .scene{padding:42px 0}
}
@media (max-width:680px){
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table,tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--line);background:var(--ink-2);padding:14px;margin-bottom:12px}
  td{border:0;padding:5px 0}
  td::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.11em;color:var(--tx-3);margin-bottom:2px}
  .tw{overflow-x:visible}
  .next{grid-template-columns:minmax(0,1fr)}
  .tail__cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* Строка шапки перестаёт помещаться раньше, чем срабатывает общий
     переход кнопок на короткую подпись (430px): знак + длинная кнопка +
     бургер требуют 505px. Замер CDP 18.09.2026 давал 53px переполнения
     в полосе 431–504. Короткую подпись здесь получает только кнопка
     шапки — кнопки в тексте страниц остаются длинными. */
  .rail__cta .btn__full{display:none}
  .rail__cta .btn__short{display:inline}
  .steps{grid-template-columns:minmax(0,1fr)}
  .reel__row,.reel__row--3,.reel__row--2{grid-template-columns:minmax(0,1fr)}
  .title-card h1{font-size:clamp(28px,7.4vw,36px)}
  .title-card .lead{font-size:18px}
  .score__n{font-size:46px}
}
@media (max-width:430px){
  :root{--gut:16px}
  .btn__full{display:none}
  .btn__short{display:inline}
  .btn{padding:11px 15px}
  .rail__in{height:66px;gap:11px}
  .panel{max-height:calc(100dvh - 66px)}
}
@media (max-width:380px){
  .mark{font-size:18px}
  .frame__v{font-size:26px}
  .btn{font-size:15px;padding:10px 13px}
}
@media (max-width:345px){
  .mark__tx{display:none}
  :root{--gut:13px}
  .title-card h1,.lost h1{font-size:25px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}