/* Шрифты — свои файлы, а не @import с Google: о шрифтах из @import браузер узнаёт
   только после разбора стилей, и при каждом обновлении страница на полсекунды
   рисовалась системным шрифтом, а потом перескакивала на Dela Gothic One. Файлы
   предзагружаются в _head.html. Подмножества: кириллица, латиница, расширенная
   латиница (польский); Onest переменный — один файл на 400–800. Лицензия OFL. */
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/static/astra/fonts/dela-gothic-one-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/static/astra/fonts/dela-gothic-one-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:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/static/astra/fonts/dela-gothic-one-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:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/astra/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/astra/fonts/onest-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:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/astra/fonts/onest-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}

/* ═══════════════════════════════════════════════════════════════════════════
   RAT KING — лендинг
   Мир знака владельца: крыса в короне, штрихи цвета кости на чёрном, золото
   короны. Синий — поле нашего коврика на складе, на нём снят каждый QC-кадр.
   Крупное — Dela Gothic One (тяжёлые плотные прописные, выбор владельца),
   текст — Onest. Тёмная тема основная: аудитория смотрит с телефона вечером,
   и знак нарисован для тёмного фона.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Тёмная на ступень светлее прежней #0f0f0e (владелец, 11.09.2026: «темноватей,
     чем было в прошлом дизайне») — тот же тёплый чёрный */
  --paper:#181715;        /* фон */
  --panel:#211f1c;        /* утопленная плашка */
  --card:#2a2824;         /* поднятая карточка */
  --ink:#ece4d4;          /* текст — цвет кости со знака */
  --muted:#b3ab9c;        /* пояснения, 7.9:1 к фону */
  --line:#3d3a34;
  --line-soft:#2e2c28;
  --accent:#e3ad55;       /* золото короны — заливки */
  --accent-hi:#f0c374;
  --accent-ink:#efbf6e;   /* золото для текста */
  --accent-wash:#372c1b;
  --on-accent:#14110b;
  --good:#8fcf8a;
  --bad:#ff9c92;          /* ошибка текстом */
  --bad-line:#e0675a;     /* рамка неверного поля */
  --navy:#1b2533;         /* поле коврика */
  --navy-2:#243145;
  --gut:4.5%;
  --maxw:1640px;
  --display:'Dela Gothic One','Onest','Segoe UI',system-ui,sans-serif;
  --text:'Onest','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
:root.rk-light{
  --paper:#ede6d7;
  --panel:#e2dac8;
  --card:#faf6ec;
  --ink:#161512;
  --muted:#4f4b43;        /* 7:1 к фону */
  --line:#cfc6b3;
  --line-soft:#ddd5c3;
  --accent:#e3ad55;
  --accent-hi:#eebd67;
  --accent-ink:#7a4f0a;   /* 5.7:1 к фону, 5:1 на утопленной плашке */
  --accent-wash:#f1e0bd;
  --good:#285c2d;
  --bad:#a3271c;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
/* Веер кадров и повёрнутая лента выходят за край экрана. hidden на body
   телефоны игнорируют (страницу можно утянуть вбок), а на html ломает липкую
   шапку. clip обрезает, не создавая прокрутки, и шапке не мешает. */
html{overflow-x:clip}
/* Зерно печати поверх всего — лёгкое, чтобы чёрный не был «экранным». */
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.rk-light body::after{opacity:.05;mix-blend-mode:multiply}

::selection{background:var(--accent);color:var(--on-accent)}
:root{caret-color:var(--accent)}
*{scrollbar-color:var(--line) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--paper);border-radius:999px}

a{color:inherit;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button,a,select,summary{-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,summary,details,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
button:disabled{opacity:.55;cursor:wait}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
strong,b{font-weight:700}
.skip{position:fixed;top:-100px;left:20px;background:var(--accent);color:var(--on-accent);
  padding:12px 16px;z-index:100;border-radius:10px;font-weight:800}
.skip:focus{top:12px}
.tnum{font-variant-numeric:tabular-nums}

/* Заголовок раздела — голос бренда: потёртые прописные */
.sec-title,.section-heading h2,.rk-final h2,.doc-hero h1{font-family:var(--display);
  font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.98}
.sec-title{font-size:clamp(34px,4.4vw,68px)}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.rk-header{position:sticky;top:0;z-index:50;height:76px;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.rk-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-rat{width:50px;height:45px;flex:none;
  background:url(/static/brand/rk-head@2x.png) center/contain no-repeat;
  background-image:image-set(url(/static/brand/rk-head@2x.webp) type("image/webp"),url(/static/brand/rk-head@2x.png) type("image/png"));
  transition:transform .45s cubic-bezier(.2,.9,.2,1)}
/* На светлом фоне рисунок цвета кости теряется, а перекрашенный в чёрный
   становится негативом — чёрной крысой со светлыми линиями. Поэтому здесь
   знак как наклейка: тот же рисунок на чёрной вырубке с плавным контуром и
   светлой кромкой, тень идёт по вырубке. */
.rk-light .brand-rat{width:54px;background-image:url(/static/brand/rk-head-sticker@2x.png?v=2);
  background-image:image-set(url(/static/brand/rk-head-sticker@2x.webp?v=2) type("image/webp"),url(/static/brand/rk-head-sticker@2x.png?v=2) type("image/png"));
  filter:drop-shadow(0 2px 3px rgba(22,21,18,.28))}
.rk-brand:hover .brand-rat{transform:rotate(-8deg) scale(1.06)}
/* Слово тем же шрифтом, что и заголовки: голос у сайта один */
.brand-word{font-family:var(--display);font-weight:400;font-size:22px;line-height:.95;letter-spacing:.01em;white-space:nowrap}
/* Подпись — доля от слова: знак масштабируется целиком, без своей ступени */
.brand-word small{display:block;margin-top:5px;font-family:var(--text);font-size:.375em;font-weight:800;
  letter-spacing:.42em;color:var(--accent-ink)}
.rk-nav{display:flex;align-items:center;gap:28px;min-width:0}
.rk-nav a{font-size:14.5px;font-weight:600;white-space:nowrap;padding:6px 0;position:relative;
  transition:color .18s}
.rk-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.rk-nav a:hover{color:var(--accent-ink)}
.rk-nav a:hover::after,.rk-nav a[aria-current]::after{transform:scaleX(1)}
.rk-tools{display:flex;align-items:center;gap:8px;flex:none}

/* Язык — своё меню: у системного списка в тёмной теме буквы сливались с фоном */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 14px;
  border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:.04em;
  transition:border-color .18s,background .18s}
.lang-btn:hover,.lang-btn[aria-expanded=true]{border-color:var(--muted);background:var(--panel)}
.lang-btn svg{transition:transform .2s}
.lang-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:200px;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;
  animation:menuIn .18s ease-out}
.lang-menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-menu button{display:grid;grid-template-columns:36px 1fr;align-items:center;width:100%;
  padding:11px 12px;border-radius:10px;text-align:left;font-size:14.5px;font-weight:600;color:var(--ink)}
.lang-menu button b{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--panel);outline:none}
.lang-menu button[aria-selected=true]{background:var(--accent-wash)}
.lang-menu button[aria-selected=true] b{color:var(--accent-ink)}

.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);transition:color .18s,border-color .18s}
.theme-toggle:hover{color:var(--ink);border-color:var(--muted)}
.ico-moon{display:none}
.rk-light .ico-sun{display:none}
.rk-light .ico-moon{display:block}
.rk-login{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:800;white-space:nowrap;
  transition:background .18s,transform .18s}
.rk-login:hover{background:var(--accent-hi);transform:translateY(-1px)}
.rk-subnav{display:none}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.rk-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;
  padding:0 28px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:15.5px;font-weight:800;letter-spacing:-.005em;
  box-shadow:0 16px 34px -18px rgba(227,173,85,.7);
  transition:background .2s,transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .2s}
.rk-button svg{flex:none;width:18px;height:18px}
.rk-button:hover{background:var(--accent-hi);transform:translateY(-2px) rotate(-1deg)}
.rk-button--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.rk-button--ghost:hover{background:var(--panel);border-color:var(--muted)}
.rk-text-link{display:inline-flex;align-items:center;gap:10px;padding:10px 0;font-size:14.5px;
  font-weight:800;color:var(--accent-ink);transition:gap .2s}
.rk-text-link svg{width:16px;height:16px}
.rk-text-link:hover{gap:15px;text-decoration:underline}

/* ── Общие секции ────────────────────────────────────────────────────────── */
.rk-section{padding:96px var(--gut);max-width:var(--maxw);margin:0 auto}
.rk-section--tight{padding-top:54px}
.section-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%;
  align-items:end;margin-bottom:44px}
.section-heading h2{font-size:clamp(30px,3.8vw,58px)}
.section-heading>p{max-width:50ch;color:var(--muted);font-size:17px;line-height:1.6}
.section-heading--gap{margin-top:78px}

/* ═══ Первый экран ══════════════════════════════════════════════════════════ */
.hero{max-width:var(--maxw);margin:0 auto;padding:48px var(--gut) 34px;display:grid;overflow-x:clip;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4%;align-items:center;
  min-height:calc(100svh - 76px - 70px)}
.hero-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(38px,5.2vw,78px);line-height:.96}
.hero-title span,.hero-title em{display:block}
.hero-title em{font-style:normal;color:var(--accent)}
.rk-light .hero-title em{color:var(--accent-ink)}
.hero-sub{margin-top:22px;max-width:46ch;font-size:17px;line-height:1.6;color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:38px;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.hero-stats>div{display:flex;flex-direction:column-reverse;gap:8px;padding:18px 18px 16px;
  border-left:1px solid var(--line);container-type:inline-size}
.hero-stats>div:first-child{border-left:0}
/* Цифра подстраивается под свою ячейку, а не под экран: на ноутбуке 1280
   «9000+» вылезало за край полосы. */
.hero-stats dd{margin:0;display:flex;align-items:center;gap:6px;font-family:var(--display);
  font-size:clamp(19px,1.9vw,34px);font-size:clamp(19px,22cqi,34px);line-height:1;color:var(--ink);white-space:nowrap}
.hero-stats>div:nth-child(2) dd{color:var(--accent)}
.rk-light .hero-stats>div:nth-child(2) dd{color:var(--accent-ink)}
.hero-stats dd svg{width:.78em;height:.78em;color:var(--good)}
.hero-stats dt{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);line-height:1.3}

/* Сцена: 3D-упаковка стоит прямо на фоне страницы, со своей мягкой тенью.
   Синюю подложку и выглядывающую из-за неё крысу владелец убрал: на старте
   было слишком много крыс, а цветной фон под коробкой лишний. Штамп QC
   шлёпается, когда вещи проверяют. */
.hero-visual{position:relative;width:100%;max-width:620px;justify-self:center}
.hero-stage{position:relative;width:100%;aspect-ratio:1/1}
.cargo{position:absolute;z-index:2;inset:0}
.cargo-poster,.cargo model-viewer{position:absolute;inset:0;display:block;width:100%;height:100%}
.cargo-poster img{width:100%;height:100%;object-fit:contain}
.cargo model-viewer{--poster-color:transparent;background:transparent;opacity:0;cursor:pointer;
  transition:opacity .5s cubic-bezier(.2,.9,.2,1)}
.is-live .cargo model-viewer{opacity:1}
/* Своя полоса загрузки у model-viewer — серая линия 5px по верхнему краю сцены.
   Гаснет она только через секунду после загрузки, и в светлой теме висела над
   появившейся коробкой. Пока модель грузится, и так виден постер той же сцены. */
.cargo model-viewer::part(default-progress-bar){display:none}
.is-live .cargo-poster{opacity:0;transition:opacity .5s cubic-bezier(.2,.9,.2,1) .2s}
/* Записанная упаковка лежит ровно там же, где постер, и гаснет, когда ожила модель */
.cargo-clip{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain;
  transition:opacity .5s cubic-bezier(.2,.9,.2,1)}
.is-live .cargo-clip,.is-static .cargo-clip{opacity:0;pointer-events:none}
.cargo-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;
  min-height:40px;margin:12px 2% 0 6%}
.cargo-steps{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;color:var(--muted);
  font-size:13.5px;font-weight:700}
.cargo-steps li{position:relative;display:flex;align-items:center;gap:12px;padding:8px 0;transition:color .3s}
.cargo-steps li+li::before{content:'';width:18px;height:1.5px;border-radius:999px;background:var(--line)}
.cargo-steps li.is-done{color:var(--ink)}
.cargo-steps li[aria-current]{color:var(--accent-ink)}
.cargo-steps li[aria-current]::after{content:'';position:absolute;left:30px;right:0;bottom:3px;height:2px;
  border-radius:999px;background:var(--accent)}
.cargo-steps li:first-child[aria-current]::after{left:0}
.qc-stamp{position:absolute;z-index:3;right:4%;top:6%;width:98px;height:98px;border-radius:50%;opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:var(--accent);color:var(--on-accent);font-family:var(--display);font-size:26px;line-height:1;
  transform:rotate(-12deg);box-shadow:0 14px 28px -12px rgba(0,0,0,.7)}
.qc-stamp::before{content:'';position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(20,17,11,.45)}
.qc-stamp svg{width:26px;height:26px;margin-top:2px}
/* Удар — в самих ключевых кадрах (1.9 → .9 → 1); кривая плавная, без пружины */
.qc-stamp.slam{animation:slam .55s cubic-bezier(.2,.9,.2,1) both}
.is-checked .qc-stamp,.is-static .qc-stamp,html:not(.js) .qc-stamp{opacity:1}
@keyframes slam{0%{transform:scale(1.9) rotate(-34deg);opacity:0}
  60%{transform:scale(.9) rotate(-9deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}

/* ── Лента площадок ──────────────────────────────────────────────────────── */
/* Лента наклонена, и на широком экране её концы выходят выше и ниже обёртки
   больше, чем на отступ, — hidden срезал углы. Обрезаем только по бокам. */
.ticker-wrap{overflow-x:clip;overflow-y:visible;padding:16px 0 26px}
.ticker{background:var(--accent);color:var(--on-accent);transform:rotate(-1.6deg);margin:0 -3%;
  border-block:2px solid var(--on-accent)}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker-list{display:flex;align-items:center}
.ticker-list li{display:flex;align-items:center;gap:26px;padding:15px 26px 12px;white-space:nowrap;
  font-family:var(--display);font-size:clamp(19px,2vw,28px);line-height:1}
.ticker-list svg{width:24px;height:24px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ═══ Три шага ══════════════════════════════════════════════════════════════ */
.steps-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;margin-top:48px}
.steps-list li{position:relative;padding-top:6px}
.steps-list li+li::before{content:'';position:absolute;left:-12%;top:48px;width:9%;height:0;
  border-top:2px dashed var(--line)}
.step-n{display:block;font-family:var(--display);font-size:clamp(62px,6.9vw,108px);line-height:.86;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);margin-bottom:18px}
.rk-light .step-n{-webkit-text-stroke-color:var(--accent-ink)}
.steps-list h3{font-size:clamp(22px,1.9vw,28px);margin-bottom:10px}
.steps-list p{max-width:34ch;color:var(--muted);font-size:15.5px;line-height:1.6}

/* ═══ Стена со склада ═══════════════════════════════════════════════════════
   Две ленты кадров едут навстречу. Все кадры сняты на нашем коврике; на
   наведении лента встаёт, кадр выпрямляется и на него шлёпается наклейка. */
.wall{padding:92px 0 84px;overflow:hidden;border-top:1px solid var(--line)}
.wall-head{max-width:var(--maxw);margin:0 auto 40px;padding:0 var(--gut);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5%;align-items:end}
.wall-head p{max-width:44ch;color:var(--muted);font-size:17px;line-height:1.6}
.wall-row{padding:9px 0}
.wall-track{display:flex;gap:16px;width:max-content;animation:wallL 80s linear infinite}
.wall-row--back .wall-track{animation-name:wallR;animation-duration:92s}
.wall-row:hover .wall-track{animation-play-state:paused}
@keyframes wallL{to{transform:translateX(-50%)}}
@keyframes wallR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wall-card{position:relative;flex:none;width:220px;aspect-ratio:9/14;margin:0;overflow:hidden;
  border-radius:18px;background:var(--navy) var(--lq,none) center/cover no-repeat;cursor:zoom-in;transform:rotate(var(--tilt,0deg));
  transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.wall-card:nth-child(3n){--tilt:-1.4deg}
.wall-card:nth-child(3n+1){--tilt:1deg}
.wall-card img{width:100%;height:100%;object-fit:cover}
.wall-card::after{content:'QC';position:absolute;top:10px;right:10px;width:58px;height:58px;
  border-radius:50%;background:var(--accent);color:var(--on-accent);font:400 19px/58px var(--display);
  text-align:center;transform:scale(0) rotate(-12deg);box-shadow:0 14px 28px -12px rgba(0,0,0,.7)}
.wall-card:hover{transform:rotate(0) scale(1.05);z-index:2}
/* Та же наклейка, что на первом экране, и тот же удар */
.wall-card:hover::after{animation:slam .45s cubic-bezier(.2,.9,.2,1) both}

/* ═══ Способы заказа с живым экраном кабинета ═══════════════════════════════
   Способы и экраны кабинета сменяются сами раз в 6 с, под активным способом
   бежит золотая линия — её конец включает следующий. Ждать не нужно: стрелки,
   нажатие на способ и свайп переключают сразу, дальше автосмены нет. Экраны
   лежат друг на друге в одной ячейке, поэтому высота блока не меняется и колонка
   с текстом не прыгает. Вне экрана линия стоит. */
.ways{background:var(--navy);color:#efe7d8;padding:96px var(--gut);
  --ink:#efe7d8;--muted:#b8c0cc;--line:rgba(239,231,216,.16);--panel:#223044}
.ways-grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:6%;align-items:center}
.ways-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ways-lead{margin-top:18px;color:var(--muted);font-size:17px}
.ways-list{display:flex;flex-direction:column;gap:6px;align-self:stretch;margin:30px 0}
.way{position:relative;overflow:hidden;border:1px solid transparent;border-radius:18px;color:var(--muted);
  transition:background-color .45s cubic-bezier(.2,.9,.2,1),border-color .45s cubic-bezier(.2,.9,.2,1),color .45s cubic-bezier(.2,.9,.2,1)}
.way-hit{display:flex;flex-direction:column;gap:3px;width:100%;padding:17px 18px 19px;border-radius:inherit;
  color:inherit;text-align:left}
@media (hover:hover){
  .way:not(.is-on):hover{background:rgba(239,231,216,.05)}
  .way:not(.is-on) .way-hit:hover b{color:var(--ink)}
}
.way-hit:focus-visible,.ways-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.way b{font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.02em}
.way-t{font-size:14.5px;line-height:1.45}
.way.is-on{background:var(--panel);border-color:var(--line);color:var(--ink)}
.way.is-on .way-t{color:var(--muted)}
.way-bar{position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:999px;
  background:var(--accent);opacity:0;transform:scaleX(0);transform-origin:left center}
.way.is-on .way-bar{opacity:1}
.ways-dots{display:none}
.ways-dots i{position:relative;flex:1;height:3px;border-radius:999px;background:var(--line);overflow:hidden}
.ways-dots i::after{content:'';position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left center}
.ways-dots i.is-done::after{transform:none}
.way-bar.is-run,.ways-dots i.is-run::after{animation:wayRun 6s linear forwards}
.ways.is-paused .way-bar.is-run,.ways.is-paused .ways-dots i.is-run::after,
.ways.is-hidden .way-bar.is-run,.ways.is-hidden .ways-dots i.is-run::after{animation-play-state:paused}
@keyframes wayRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Ручное переключение. Стрелки и счётчик — в строке с кнопкой кабинета; на узкой
   ширине стрелки по краям полоски времени, под экраном. */
.ways-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;align-self:stretch}
.ways-nav{display:flex;align-items:center;gap:10px}
.ways-arrow{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink);
  transition:background-color .2s cubic-bezier(.2,.9,.2,1),border-color .2s cubic-bezier(.2,.9,.2,1),color .2s cubic-bezier(.2,.9,.2,1),transform .12s cubic-bezier(.2,.9,.2,1)}
.ways-arrow svg{width:20px;height:20px}
.ways-arrow--prev svg{transform:scaleX(-1)}
/* Подсветка — только там, где есть курсор: на телефоне она залипала после нажатия */
@media (hover:hover){.ways-arrow:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}}
.ways-arrow:active{transform:scale(.94)}
.ways-count{min-width:3.6em;text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ways-count b{color:var(--ink);font-weight:800}

/* Экран кабинета — в цветах самого кабинета, чтобы превью не врало */
.ways-screen{--cab-bg:#181715;--cab-card:#211f1c;--cab-line:#3d3a34;--cab-text:#ece4d4;
  --cab-muted:#b3ab9c;--cab-accent:#efbf6e;--cab-fill:#e3ad55;
  --cab-well:#1c1b18;--cab-good:#8fcf8a;--cab-me:#e3ad55;--cab-me-line:#e3ad55;--cab-on-fill:#14110b;
  position:relative;border-radius:26px;overflow:hidden;background:var(--cab-bg);
  border:1px solid rgba(239,231,216,.14);box-shadow:0 44px 90px -36px rgba(0,0,0,.8);
  transform:rotate(1.2deg)}
.screen-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--cab-line);
  font-size:12.5px;color:var(--cab-muted)}
.screen-bar i{width:9px;height:9px;border-radius:50%;background:var(--cab-line)}
.screen-bar b{margin-left:10px;color:var(--cab-text);font-weight:700}
.screen-bar em{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--accent);
  color:var(--on-accent);font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pv-stack{display:grid}
.pv{grid-area:1/1;display:flex;flex-direction:column;gap:13px;min-width:0;padding:22px;color:var(--cab-text);
  opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.2,.9,.2,1),visibility 0s linear .45s}
.pv.is-on{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.2,.9,.2,1) .15s,visibility 0s}
/* Внутри экрана короткая постановка: ссылка набирается, заказ появляется, за ним
   фото. У ушедшего экрана детали сбрасываются, когда он уже погас. */
.pv [data-in]{opacity:0;transform:translateY(10px);
  transition:opacity .45s cubic-bezier(.2,.9,.2,1) var(--d,0s),transform .6s cubic-bezier(.2,.9,.2,1) var(--d,0s)}
.pv:not(.is-on) [data-in]{transition:opacity 0s linear .5s,transform 0s linear .5s}
.pv.is-on [data-in]{opacity:1;transform:none}
.pv.is-reset [data-in]{opacity:0;transform:translateY(10px);transition:none}
.pv [data-in="2"]{--d:.2s}.pv [data-in="4"]{--d:.4s}.pv [data-in="6"]{--d:.6s}.pv [data-in="8"]{--d:.8s}
.pv [data-in="10"]{--d:1s}.pv [data-in="13"]{--d:1.3s}.pv [data-in="16"]{--d:1.6s}.pv [data-in="18"]{--d:1.8s}
.pv [data-in="20"]{--d:2s}.pv [data-in="22"]{--d:2.2s}
.pv .pv-url{clip-path:inset(0 100% 0 0);transition:clip-path 0s linear .5s}
.pv.is-on .pv-url{clip-path:inset(0);transition:clip-path .9s steps(28,end) .3s}
.pv.is-reset .pv-url{clip-path:inset(0 100% 0 0);transition:none}
.pv.is-on:not(.is-reset) .pv-btn{animation:pvPress .4s cubic-bezier(.2,.9,.2,1) 1.2s both}
@keyframes pvPress{50%{transform:scale(.93)}}
.pv figure{margin:0;overflow:hidden;background:var(--cab-card)}
.pv img{width:100%;height:100%;object-fit:cover}
.pv-sub{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cab-muted)}
.pv-input{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;
  background:var(--cab-well);border:1px solid var(--cab-line);color:var(--cab-muted);font-size:13.5px}
.pv-input svg{width:18px;height:18px;flex:none}
.pv-url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cab-text)}
.pv-url::after{content:'';display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--cab-accent);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.pv-btn{flex:none;padding:9px 14px;border-radius:10px;background:var(--cab-fill);color:var(--cab-on-fill);font-size:12.5px;font-weight:700}
.pv-order{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;
  border-radius:16px;background:var(--cab-card);border:1px solid var(--cab-line)}
.pv-order--flat{grid-template-columns:minmax(0,1fr) auto}
.pv-thumb{width:84px;height:104px;border-radius:10px}
.pv-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.pv-info b{font-size:14.5px;color:var(--cab-text)}
.pv-info span{font-size:12.5px;color:var(--cab-muted)}
.pv-info .pv-price{color:var(--cab-text);font-weight:700;font-variant-numeric:tabular-nums}
.pv-status{align-self:start;padding:6px 10px;border-radius:999px;background:rgba(143,207,138,.14);
  color:var(--cab-good);font-size:11.5px;font-weight:800;white-space:nowrap}
/* Экран кабинета не выше экрана устройства (владелец, 11.09.2026: «растянута и в один вид не
   попадает»): высоту всех экранов задаёт самый высокий, и каталог плитками 2×2 растягивал
   рамку до 854 px. Каталог — в ряд, кадры QC — квадраты. */
.pv-qc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pv-qc-row figure{aspect-ratio:1/1;border-radius:10px}
.pv-more{display:grid;place-items:center;background:var(--cab-well)!important;border:1px dashed var(--cab-line);
  color:var(--cab-muted);font-weight:800;font-size:14.5px}
.pv-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pv-tile{border-radius:16px;overflow:hidden;background:var(--cab-card);border:1px solid var(--cab-line)}
.pv-tile figure{aspect-ratio:4/5}
.pv-tile div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;font-size:12.5px}
.pv-tile b{font-variant-numeric:tabular-nums}
.pv-tile i{padding:4px 8px;border-radius:6px;background:var(--cab-fill);color:var(--cab-on-fill);font-style:normal;font-size:11.5px;font-weight:700}
.pv-chat{display:flex;flex-direction:column;gap:12px}
.msg{align-self:flex-start;max-width:80%;padding:9px;border-radius:16px 16px 16px 6px;
  background:var(--cab-card);border:1px solid var(--cab-line);font-size:13.5px}
.msg--me{align-self:flex-end;background:var(--cab-me);border-color:var(--cab-me-line);color:var(--cab-on-fill);border-radius:16px 16px 6px 16px}
.msg p{margin:6px 5px 3px}
.msg-photo{width:168px;aspect-ratio:3/4;border-radius:12px}
.msg-links{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.msg-links>span{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:6px 10px 6px 6px;border-radius:12px;background:var(--cab-well)}
.msg-links figure{width:46px;height:54px;border-radius:10px}
.msg-links b{font-size:13.5px}
.msg-links i{font-style:normal;font-weight:800;color:var(--cab-accent);font-variant-numeric:tabular-nums}
.pv-chips{display:flex;flex-wrap:wrap;gap:8px}
.pv-chips code{padding:8px 11px;border-radius:10px;background:var(--cab-well);border:1px solid var(--cab-line);
  font-family:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--cab-text)}
.pv-chips .add{border-style:dashed;color:var(--cab-accent)}
.pv-lines{display:flex;flex-direction:column;border:1px solid var(--cab-line);border-radius:12px;overflow:hidden}
.pv-lines span{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;font-size:13.5px;
  border-bottom:1px solid var(--cab-line)}
.pv-lines span:last-child{border-bottom:0}
.pv-lines i{font-style:normal;color:var(--cab-muted);font-variant-numeric:tabular-nums}

/* ═══ Цены ══════════════════════════════════════════════════════════════════ */
.price-rows{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;gap:8px 32px;
  align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.price-row b{font-size:17px;font-weight:800}
.price-row span{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:56ch}
.price-row span a{color:var(--accent-ink);text-decoration:underline}
.price-row em{font-style:normal;font-family:var(--display);font-size:clamp(19px,1.7vw,26px);line-height:1;
  text-align:right;white-space:nowrap}
.price-row--sum{margin:0 -22px;padding:22px;border-bottom:0;border-radius:18px;background:var(--panel)}
.price-row--sum em{color:var(--accent-ink)}
.prices-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px}
.prices-foot p{max-width:52ch;color:var(--muted);font-size:15.5px}

/* ═══ Отзывы ════════════════════════════════════════════════════════════════ */
.rv-strip{position:relative;overflow:hidden}
.rv-strip::before,.rv-strip::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.rv-strip::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.rv-strip::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.rv-track{display:flex;gap:14px;width:max-content;animation:tick 80s linear infinite}
.rv-strip:hover .rv-track{animation-play-state:paused}
.rv-card{flex:none;display:flex;align-items:center;justify-content:center;width:236px;height:420px;margin:0;
  overflow:hidden;border-radius:18px;background:var(--panel);border:1px solid var(--line-soft)}
.rv-card img{width:100%;height:100%;object-fit:contain}
.rv-foot{display:flex;justify-content:flex-end;margin-top:18px}

/* ═══ Вопросы ═══════════════════════════════════════════════════════════════ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
  font-size:19px;font-weight:700;cursor:pointer;list-style:none;transition:color .18s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover,.faq-item[open] summary{color:var(--accent-ink)}
.faq-mark{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);
  color:var(--muted);transition:transform .35s cubic-bezier(.2,.9,.2,1),background .2s,border-color .2s}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;left:50%;top:50%;background:currentColor;border-radius:999px}
.faq-mark::before{width:11px;height:1.6px;margin:-.8px 0 0 -5.5px}
.faq-mark::after{width:1.6px;height:11px;margin:-5.5px 0 0 -.8px}
.faq-item[open] .faq-mark{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq-a{max-width:70ch;padding:0 0 24px;color:var(--muted);font-size:15.5px;line-height:1.7}

/* ═══ Финал ═════════════════════════════════════════════════════════════════ */
.final{max-width:var(--maxw);margin:0 auto;padding:90px var(--gut);display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:6%;align-items:center;border-top:1px solid var(--line)}
.final-rat{width:100%;max-width:400px;justify-self:center;aspect-ratio:624/864;
  background:url(/static/brand/rk-lockup@2x.png) center/contain no-repeat;
  background-image:image-set(url(/static/brand/rk-lockup@2x.webp) type("image/webp"),url(/static/brand/rk-lockup@2x.png) type("image/png"))}
/* На светлой теме — виниловая наклейка: рисунок на чёрной вырубке с одним плавным
   контуром и светлой кромкой (design_src/brand/build_sticker.py). Вырубка впритык
   к буквам с каплями вокруг выглядела грязной обводкой. Тень идёт по контуру,
   наклон — как у наклейки, прижатой к бумаге. */
.rk-light .final-rat{aspect-ratio:704/941;background-image:url(/static/brand/rk-lockup-sticker@2x.png?v=2);
  background-image:image-set(url(/static/brand/rk-lockup-sticker@2x.webp?v=2) type("image/webp"),url(/static/brand/rk-lockup-sticker@2x.png?v=2) type("image/png"));
  transform:rotate(-3deg);filter:drop-shadow(0 18px 22px rgba(22,21,18,.22)) drop-shadow(0 3px 4px rgba(22,21,18,.2))}
.final p{margin-top:20px;max-width:40ch;color:var(--muted);font-size:17px}
.rk-final{max-width:var(--maxw);margin:0 auto;padding:70px var(--gut);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.rk-final h2{font-size:clamp(30px,3.8vw,58px)}
.rk-final>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* ═══ Подвал ════════════════════════════════════════════════════════════════ */
.rk-footer{max-width:var(--maxw);margin:0 auto;padding:54px var(--gut) 44px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 32px}
.foot-brand p{margin-top:16px;max-width:34ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.rk-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.rk-footer nav b{margin-bottom:5px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rk-footer nav a{font-size:14.5px;font-weight:600}
.rk-footer nav a:hover{color:var(--accent-ink);text-decoration:underline}
.foot-rule{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
/* Авторы 3D-моделей первого экрана — условие их лицензий */
.foot-credits{grid-column:1/-1;margin-top:-22px;max-width:90ch;color:var(--muted);font-size:12.5px;line-height:1.6}
.foot-credits a{text-decoration:underline;text-underline-offset:3px}
.foot-credits a:hover{color:var(--accent-ink)}

/* ═══ Вход ══════════════════════════════════════════════════════════════════ */
dialog{position:relative;width:calc(100% - 32px);max-width:430px;padding:38px;border-radius:26px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 44px -16px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,8,7,.78);backdrop-filter:blur(3px)}
dialog h2{margin-bottom:10px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1}
dialog>p{margin-bottom:20px;color:var(--muted);font-size:14.5px}
dialog label{display:block;margin:14px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
dialog input{width:100%;margin-top:7px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-weight:600}
dialog input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
dialog .rk-button{width:100%;margin-top:10px}
dialog .rk-text-link{width:100%;justify-content:center}
.dialog-close{position:absolute;top:12px;right:14px;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;color:var(--muted)}
.dialog-close:hover{background:var(--panel);color:var(--ink)}
dialog>a{color:var(--muted);font-size:12.5px;text-decoration:underline}
.auth-error{color:var(--bad);font-weight:700}
/* Переключатель «Вход | Регистрация»: две дольки на утопленной подложке, активная
   поднята карточкой. Так с первого взгляда видно, что аккаунт заводится здесь же. */
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:18px 0 2px;padding:4px;
  border-radius:14px;background:var(--panel);border:1px solid var(--line-soft)}
.auth-switch button{padding:9px 10px;border-radius:11px;border:1px solid transparent;background:none;
  color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s}
.auth-switch button:hover{color:var(--ink)}
.auth-switch button[aria-selected=true]{background:var(--card);border-color:var(--line);color:var(--accent-ink)}
.auth-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-hint{display:block;margin-top:7px;color:var(--muted);font-size:11.5px;font-weight:600}
/* Поля режима: у подписей в окне свой display, и он сильнее атрибута hidden —
   без этого правила «код друга» и подсказка про пароль оставались на виду при
   входе. Прятать атрибутом можно только там, где стиль этому не мешает. */
dialog [hidden]{display:none!important}
.auth-opt{font-weight:600;color:var(--muted);opacity:.72}
#auth-status{min-height:18px;margin-top:8px;color:var(--muted);font-size:12.5px}

/* ═══════════════════════════════════════════════════════════════════════════
   Документные страницы: важная информация, оферта, конфиденциальность,
   контакты, калькулятор. Режим чтения — текст спокойнее, крупное в бренде.
   ═══════════════════════════════════════════════════════════════════════════ */
.doc-hero{max-width:var(--maxw);margin:0 auto;padding:60px var(--gut) 44px;border-bottom:1px solid var(--line)}
.doc-hero h1{max-width:18ch;font-size:clamp(34px,4.4vw,68px)}
.doc-hero p{margin-top:20px;max-width:60ch;color:var(--muted);font-size:17px;line-height:1.65}
.doc-meta{margin-top:22px!important;font-size:13.5px!important}
.doc-body{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 40px;display:grid;
  grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:64px;align-items:start}
.doc-nav{position:sticky;top:96px;padding:34px 0;display:flex;flex-direction:column;gap:2px}
.doc-nav b{margin-bottom:12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.doc-nav a{padding:8px 0 8px 14px;border-left:1px solid var(--line);color:var(--muted);font-size:14.5px;font-weight:600;
  transition:color .18s,border-color .18s}
.doc-nav a:hover{color:var(--ink);border-left-color:var(--muted)}
.doc-nav a[aria-current]{color:var(--ink);font-weight:800;border-left-color:var(--accent)}
/* Языки одной статьи — внизу бокового оглавления. Страницы-ответы живут каждая на
   своём адресе, и переключатель в шапке их не свяжет: он меняет язык на месте, а
   тут надо уйти на соседний адрес. Отделено чертой сверху, чтобы не читалось
   продолжением списка разделов. */
.doc-langs{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);font-size:13.5px}
.doc-langs a{padding:0;border-left:0;color:var(--muted);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.doc-langs a:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.doc-langs b{margin:0;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:800}
.doc-main{min-width:0;padding-top:34px}
.doc-sec{padding-bottom:60px;scroll-margin-top:96px}
.doc-sec+.doc-sec{padding-top:56px;border-top:1px solid var(--line)}
.doc-sec>h2{margin-bottom:14px;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.03em}
.doc-sec>h2+p{max-width:68ch;margin-bottom:32px;color:var(--muted);font-size:17px;line-height:1.7}
.doc-sec h3{margin:34px 0 12px;font-size:19px}
.doc-sec p{max-width:70ch;margin-bottom:14px;line-height:1.75}
.doc-list{border-top:1px solid var(--line)}
.doc-list>li{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:8px 32px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.doc-list>li>b{font-size:17px;font-weight:800}
.doc-list>li>span{max-width:66ch;color:var(--muted);font-size:15.5px;line-height:1.7}
.doc-list>li>em{grid-column:2;font-style:normal;font-size:12.5px;font-weight:800;color:var(--accent-ink)}
.doc-list--pairs>li{grid-template-columns:minmax(0,1fr) auto}
.doc-list--pairs>li>em{grid-column:2;grid-row:1;text-align:right;font-size:15.5px;color:var(--ink);font-variant-numeric:tabular-nums}

.step-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;
  gap:8px 32px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line)}
.step-row:first-child{padding-top:0}
.step-idx{grid-row:1/4;padding-top:2px;font-family:var(--display);font-size:28px;line-height:1;color:var(--accent-ink)}
.step-row h3{grid-column:2;margin:0 0 10px;font-size:22px}
.step-row .step-text{grid-column:2;max-width:62ch;color:var(--muted);font-size:15.5px;line-height:1.7}
.step-row .step-text p+p{margin-top:10px}
.step-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.step-tags span{padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink)}
.step-shot{grid-column:3;grid-row:1/4;margin:0;overflow:hidden;border-radius:16px;background:var(--panel);cursor:zoom-in}
.step-shot picture{display:block}
.step-shot img{width:100%;height:auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.step-shot:hover img{transform:scale(1.03)}

/* Экран кабинета у шага: фрагмент мобильного кабинета, по нажатию — экран
   целиком. Лежит на странице как телефон на столе — тень экрана из словаря. */
.step-shot.step-shot--ui{overflow:visible;border-radius:0;background:none;cursor:auto}
.shot-open{position:relative;display:block;width:100%;padding:0;overflow:hidden;cursor:zoom-in;
  border:1px solid rgba(239,231,216,.14);border-radius:16px;background:#171a1d;
  box-shadow:0 44px 90px -36px rgba(0,0,0,.8)}
.shot-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.step-shot--ui .shot-open img{display:block}
.step-shot figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
/* Лупа живёт в подписи, а не в углу кадра: там она закрывала кнопки кабинета.
   Нажатие на подпись тоже открывает экран — обработчик висит на всей фигуре. */
.step-shot--ui figcaption{cursor:zoom-in}
.step-shot--ui figcaption>span{display:inline-flex;align-items:center;gap:8px;min-width:0;
  transition:color .3s cubic-bezier(.2,.9,.2,1)}
.step-shot--ui figcaption svg{flex:none;color:var(--accent-ink)}
.step-shot--ui:hover figcaption>span{color:var(--ink)}
.step-shot figcaption em{flex:none;padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-style:normal;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.doc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 32px;align-items:start}
.doc-split>.doc-list>li{grid-template-columns:minmax(0,1fr)}
.doc-split>.doc-list>li>em{grid-column:1}
.doc-split>.step-shot{grid-column:2;grid-row:1;padding-top:22px}
/* Ноутбук поуже: рядом с текстом десктопный фрагмент выходит мельче читаемого,
   а текст сжимается до сорока знаков. Кадр встаёт под текст, не шире 640px. */
@media (max-width:1320px){
  .step-row{grid-template-columns:auto minmax(0,1fr)}
  .step-idx{grid-row:1/5}
  .step-shot{grid-column:2;grid-row:auto;max-width:640px;margin-top:18px}
  .doc-split{grid-template-columns:minmax(0,1fr)}
  .doc-split>.step-shot{grid-column:1;grid-row:auto;max-width:640px;padding-top:18px}
}
@media (max-width:760px){
  .step-shot.step-shot--ui{max-width:440px}
}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card)}
table.rk-tbl{width:100%;min-width:460px;border-collapse:collapse;font-size:14.5px}
/* Таблица в два столбца помещается и на телефоне. Общая min-width в 460px нужна
   тарифной таблице с десятком колонок; здесь она заставляла возить пальцем ради
   трёх строк, и вторая колонка уезжала за край. Селектор с тегом и ниже по файлу:
   иначе проигрывает правилу выше и по весу, и по порядку. */
table.rk-tbl--pair{min-width:0}
.rk-tbl th,.rk-tbl td{padding:14px 18px;border-bottom:1px solid var(--line-soft);text-align:left}
.rk-tbl thead th{background:var(--panel);color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}
.rk-tbl tbody tr:last-child td,.rk-tbl tbody tr:last-child th{border-bottom:0}
.rk-tbl tbody tr:hover{background:var(--panel)}
.rk-tbl td.num{text-align:right;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.rk-tbl .zone{display:flex;align-items:center;gap:10px;font-weight:700}
.rk-tbl .zone i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
/* С флагами: слот флагов, название, пометки строкой под названием — сбоку они
   ломали узкую колонку направлений на две строки */
.rk-tbl .zone:has(>.flags){display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px}
.rk-tbl .zone:has(>.flags) i{grid-column:2}
/* Флаги направления. У группы стран — внахлёст, с кольцом цвета строки, чтобы
   край каждого читался; у «Других стран» — глобус (i-globe). */
.flags{display:inline-flex;flex:none;align-items:center}
.flags img{display:block;width:20px;height:14px;margin:0;object-fit:cover;box-shadow:0 0 0 1.5px var(--card)}
.flags img+img{margin-left:-6px}
/* В таблице флаги — в слоте одной ширины и прижаты к названию: названия стоят ровно */
.rk-tbl .zone .flags,#static-rates-body .flags{width:62px;justify-content:flex-end}
.flag-globe{display:block;width:20px;height:14px;padding:1px 4px;background:var(--panel);color:var(--muted);
  box-shadow:0 0 0 1px var(--line)}
.rk-tbl tbody tr:hover .flags img,#static-rates-body tr:hover .flags img{box-shadow:0 0 0 1.5px var(--panel)}
.tbl-note{max-width:74ch;margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.7}
.tbl-note a{color:var(--accent-ink);font-weight:800;text-decoration:underline}
/* «Другие страны»: цену называет менеджер — строка ссылкой вместо цифр */
.rk-tbl td.ask,#static-rates-body td.ask{text-align:left}
.ask-mgr{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink);font-weight:800;text-decoration:underline;text-underline-offset:4px;transition:color .16s}
.ask-mgr:hover{color:var(--ink)}
.ask-mgr svg{flex:none;width:16px;height:16px}
.tbl-foot{padding:13px 18px;background:var(--panel);border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
/* Вкладки способов доставки над тарифами. Без скриптов вкладок нет — видны все
   таблицы подряд со своими заголовками. */
.mode-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mode-tabs [role=tab]{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--muted);font-size:14.5px;font-weight:700;
  transition:border-color .18s cubic-bezier(.2,.9,.2,1),color .18s cubic-bezier(.2,.9,.2,1),background-color .18s cubic-bezier(.2,.9,.2,1)}
.mode-tabs [role=tab] span{min-width:24px;padding:1px 8px;border-radius:999px;background:var(--panel);color:var(--ink);
  font-size:12.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.mode-tabs [role=tab]:hover{border-color:var(--muted);color:var(--ink)}
.mode-tabs [role=tab][aria-selected=true]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.mode-tabs [role=tab][aria-selected=true] span{background:var(--accent);color:var(--on-accent)}
.mode-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html:not(.js) .mode-tabs{display:none}
.mode-panel+.mode-panel{margin-top:30px}
.js .mode-title{display:none}
.doc-sec .mode-title{margin:0 0 12px}
.doc-sec .mode-note{margin:0 0 12px;color:var(--muted);font-size:14.5px}

.doc-notes{margin-top:26px;border-top:1px solid var(--line)}
.doc-notes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:15.5px;line-height:1.7}
.doc-notes li svg{width:18px;height:18px;margin-top:4px;color:var(--accent)}
.doc-notes li strong{color:var(--ink)}

.calc-sheet{max-width:640px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.calc-sheet .cs-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:14px 20px;
  border-bottom:1px solid var(--line-soft);font-size:15.5px}
.calc-sheet .cs-row>span{color:var(--muted)}
.calc-sheet .cs-row b{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-sheet .cs-total{background:var(--panel);border-bottom:0;font-size:17px}
.calc-sheet .cs-total>span{color:var(--ink);font-weight:800}
.calc-sheet .cs-total b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--accent-ink)}

.pay-list{border-top:1px solid var(--line)}
.pay-list li{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line)}
.pay-list b{font-size:17px;font-weight:800}
.pay-list span{max-width:56ch;color:var(--muted);font-size:15.5px}
.pay-list em{font-style:normal;font-size:15.5px;font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pay-list i{grid-column:3;font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);text-align:right}

.wt-formula{margin:26px 0;padding:26px 28px;border-radius:18px;background:var(--panel);font-size:17px;font-weight:700}
.wt-formula small{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;font-weight:600}
.wt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:var(--line)}
.wt-grid div{padding:18px 20px;background:var(--paper)}
.wt-grid b{display:block;margin-bottom:4px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1}
.wt-grid span{color:var(--muted);font-size:13.5px}

.guard-list{border-top:1px solid var(--line)}
.guard-list li{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;gap:8px 30px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.guard-list b{font-size:17px;font-weight:800}
.guard-list span{max-width:64ch;color:var(--muted);font-size:15.5px;line-height:1.7}
.guard-list em{font-style:normal;font-size:13.5px;font-weight:800;color:var(--good);text-align:right;white-space:nowrap}
/* Возврат с удержанием или без возврата — не зелёным: это не «всё вернём» */
.guard-list li.is-warn em{color:var(--accent-ink)}

.sec-n{display:inline-block;min-width:2.2em;font-family:var(--display);font-weight:400;color:var(--accent-ink)}
.doc-nav .sec-n{min-width:1.9em;font-family:var(--text);font-size:12.5px;font-weight:700;color:var(--muted)}
.doc-nav a[aria-current] .sec-n{color:var(--accent-ink)}
.doc-legal h2{display:flex;align-items:baseline;gap:4px;font-size:clamp(26px,2.5vw,34px)}
.doc-legal p{max-width:72ch;margin-bottom:15px;font-size:15.5px;line-height:1.78}
.doc-legal ul{max-width:72ch;margin:0 0 16px}
.doc-legal ul>li{position:relative;margin-bottom:9px;padding-left:20px;line-height:1.7}
.doc-legal ul>li::before{content:'';position:absolute;left:2px;top:.72em;width:7px;height:2px;border-radius:999px;background:var(--accent)}
.doc-legal a{color:var(--accent-ink);text-decoration:underline}
.doc-card{max-width:74ch;margin:22px 0;padding:24px 26px;border-radius:18px;background:var(--panel)}
.doc-card h3{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.doc-card>p:last-child,.doc-card>ul:last-child{margin-bottom:0}
.doc-card--accent>h3{color:var(--accent-ink)}
.doc-card--warn>h3{color:var(--accent-ink)}
.doc-card--green>h3{color:var(--good)}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin-top:34px;
  overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--line)}
.contact-grid a,.contact-grid div{display:block;padding:26px 24px;background:var(--paper);transition:background .2s}
.contact-grid a:hover{background:var(--panel)}
.contact-grid b{display:block;margin-bottom:10px;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.contact-grid strong{display:block;margin-bottom:6px;font-size:clamp(15.5px,1.2vw,19px);font-weight:800;
  line-height:1.35;overflow-wrap:break-word}
.contact-grid span{color:var(--muted);font-size:13.5px;line-height:1.6}
.contact-write{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:8%;align-items:start}
.contact-aside{padding:6px 0 0 8%;border-left:1px solid var(--line)}
.contact-aside h3{margin:0 0 10px;font-size:19px}
.contact-aside p{max-width:36ch;margin-bottom:16px;color:var(--muted);font-size:14.5px;line-height:1.7}
.contact-aside .rk-button{margin-bottom:44px}
.rk-form{max-width:760px;min-width:0}
.rk-form label{display:block;margin-bottom:18px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.rk-form input,.rk-form select,.rk-form textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:15.5px;font-weight:500;text-transform:none;letter-spacing:0;transition:border-color .18s,box-shadow .18s}
.rk-form textarea{min-height:130px;resize:vertical;line-height:1.6}
.rk-form input:hover,.rk-form select:hover,.rk-form textarea:hover{border-color:var(--muted)}
.rk-form input:focus,.rk-form select:focus,.rk-form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
.rk-form input:user-invalid,.rk-form textarea:user-invalid{border-color:var(--bad-line)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:8px}
.form-foot p{max-width:44ch;color:var(--muted);font-size:13.5px;line-height:1.6}
.form-foot a{text-decoration:underline}
.form-status{min-height:20px;margin-top:16px;color:var(--muted);font-size:14.5px;font-weight:700}
.form-status.is-ok{color:var(--good)}
.form-status.is-err{color:var(--bad)}

.rk-lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:32px;
  --ink:#ece4d4;background:rgba(8,8,7,.92);backdrop-filter:blur(4px)}
.rk-lb.on{display:flex}
.rk-lb img{max-width:min(1100px,92vw);max-height:88vh;width:auto;border-radius:16px;box-shadow:0 44px 90px -36px rgba(0,0,0,.8)}
.rk-lb button{position:absolute;top:20px;right:24px;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:rgba(236,228,212,.12);color:var(--ink)}
.rk-lb button:hover{background:rgba(236,228,212,.24)}

/* ═══ Появление на прокрутке ════════════════════════════════════════════════
   Включается только со скриптами: сломанный скрипт не спрячет половину страницы. */
html.js .rk-rise{opacity:0;transform:translateY(22px) rotate(-.6deg);
  transition:opacity .7s cubic-bezier(.2,.9,.2,1),transform .7s cubic-bezier(.2,.9,.2,1);transition-delay:var(--d,0ms)}
html.js .rk-rise.seen{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════════
   Адаптация
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
  .rk-nav{gap:18px}
  .rk-nav a{font-size:13.5px}
  .doc-body{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:44px}
  .step-row{gap:8px 24px}
}
/* Узкий ноутбук: первый экран ещё в две колонки, и четыре ячейки цифр в
   половине ширины не вмещают подписи — «доставлено» вылезало из ячейки. */
@media (min-width:1001px) and (max-width:1180px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats>div:nth-child(3){border-left:0}
  .hero-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Планшет: четыре пункта меню не помещаются между знаком и кнопками —
   переносим их во вторую строку, как на телефоне. */
@media (max-width:900px){
  html{scroll-padding-top:136px}
  .rk-nav{display:none}
  .rk-subnav{position:sticky;top:76px;z-index:40;display:flex;overflow-x:auto;padding:0 var(--gut);
    background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:none}
  .rk-subnav::-webkit-scrollbar{display:none}
  .rk-subnav a{flex:none;padding:13px 14px;border-bottom:2px solid transparent;color:var(--muted);
    font-size:13.5px;font-weight:700;white-space:nowrap}
  .rk-subnav a:first-child{padding-left:0}
  .rk-subnav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:26px;min-height:0;padding-top:34px}
  .hero-visual{max-width:520px}
  .section-heading,.wall-head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .steps-list{grid-template-columns:1fr;gap:34px}
  .steps-list li+li::before{display:none}
  /* Способы заказа: заголовок, под ним экран кабинета, под экраном — какой способ
     сейчас показан, с полоской времени; кнопка последней. Список рядом с экраном
     на узкой ширине оказывался далеко от него. */
  .ways-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .ways-copy{display:contents}
  .ways-copy>.sec-title{order:1}
  .ways-lead{order:2;margin-top:14px}
  .ways-screen{order:3;width:100%;max-width:620px;min-height:0;margin-top:30px;transform:none}
  .ways-foot{display:contents}
  .ways-nav{order:4;width:100%;max-width:620px;margin-top:18px;gap:12px}
  .ways-dots{display:flex;flex:1;gap:6px}
  .ways-count{display:none}
  .ways-arrow{width:44px;height:44px}
  .ways-list{order:5;display:grid;max-width:620px;margin:14px 0 0}
  .ways-list>.way{grid-area:1/1;padding:0;border:0;border-radius:0;background:none;color:var(--ink);
    opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.2,.9,.2,1),visibility 0s linear .4s}
  .ways-list>.way.is-on{opacity:1;visibility:visible;transition:opacity .4s cubic-bezier(.2,.9,.2,1) .1s,visibility 0s}
  .ways-list .way b{font-size:19px}
  .ways-list .way-t{font-size:15.5px;line-height:1.5}
  .ways-list .way-hit{padding:0}
  .way-bar{display:none}
  .ways-foot>.rk-button{order:6;align-self:flex-start;margin-top:28px}
  .final{grid-template-columns:1fr;gap:30px}
  .final-rat{max-width:300px}
  .rk-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
  .contact-write{grid-template-columns:1fr;gap:44px}
  .contact-aside{padding:32px 0 0;border-left:0;border-top:1px solid var(--line)}
  .contact-aside p{max-width:60ch}
  .doc-body{grid-template-columns:1fr;gap:0}
  .doc-nav{position:static;flex-direction:row;overflow-x:auto;gap:0;margin:0 calc(var(--gut)*-1);
    padding:14px var(--gut);border-bottom:1px solid var(--line);scrollbar-width:none}
  .doc-nav::-webkit-scrollbar{display:none}
  .doc-nav b{display:none}
  .doc-nav a{padding:9px 14px;border-left:0;border-bottom:2px solid transparent;white-space:nowrap;font-size:13.5px}
  .doc-nav a[aria-current]{border-bottom-color:var(--accent)}
}
/* Без движения на узкой ширине способы сами не сменяются — показываем весь
   список; стрелки листают экран, вместо полоски времени — счётчик */
@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  .ways-list{display:flex;flex-direction:column;gap:16px}
  .ways-list>.way{opacity:1;visibility:visible}
  .ways-dots{display:none}
  .ways-count{display:block;flex:1}
}
@media (max-width:760px){
  html{scroll-padding-top:130px;scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  .rk-header{height:64px;gap:8px}
  .brand-rat{width:40px;height:36px}
  .brand-word{font-size:17px}
  .brand-word small{letter-spacing:.39em;margin-top:4px}
  .rk-tools{gap:6px}
  .lang-btn{height:36px;padding:0 9px 0 11px;font-size:12.5px}
  .theme-toggle{width:36px;height:36px}
  .rk-login{height:36px;padding:0 13px;font-size:12.5px}
  .rk-subnav{top:64px}

  .hero{padding:26px var(--gut) 20px}
  .hero-title{font-size:clamp(32px,10vw,50px)}
  /* Слово шире экрана переносим, а не обрезаем */
  .hero-title,.sec-title,.section-heading h2,.rk-final h2,.doc-hero h1{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  .hero-sub{margin-top:16px;font-size:15.5px}
  .hero-cta{margin-top:22px}
  .hero-cta .rk-button{flex:1 1 100%}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
  .hero-stats>div{padding:14px 14px 12px}
  .hero-stats>div:nth-child(3){border-left:0}
  .hero-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-stats dd{font-size:clamp(19px,20cqi,30px)}
  .hero-visual{max-width:380px}
  .cargo-bar{margin:10px 0 0}
  .qc-stamp{width:76px;height:76px;font-size:19px}
  .qc-stamp svg{width:20px;height:20px}

  .ticker-list li{padding:12px 18px 10px;gap:18px;font-size:19px}
  .ticker-list svg{width:18px;height:18px}

  .rk-section{padding:60px var(--gut)}
  .sec-title{font-size:clamp(28px,8.6vw,40px)}
  .section-heading{margin-bottom:28px}
  .section-heading h2{font-size:clamp(26px,7.4vw,38px)}
  .section-heading>p{font-size:15.5px}
  .steps-list{margin-top:30px}
  .step-n{margin-bottom:10px}

  .wall{padding:60px 0 56px}
  .wall-head{margin-bottom:26px}
  .wall-card{width:150px;border-radius:16px}
  .wall-track{gap:10px}

  .ways{padding:60px var(--gut)}
  .ways-screen{border-radius:18px;box-shadow:0 26px 50px -28px rgba(0,0,0,.8)}
  .pv{padding:16px}
  .msg-photo{width:120px}
  .pv-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-tile figure{aspect-ratio:4/3}

  .price-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 0}
  .price-row span{grid-column:1/-1;font-size:14.5px}
  .price-row em{grid-column:2;grid-row:1;font-size:19px}
  .price-row--sum{margin:0 -14px;padding:18px 14px}
  .prices-foot .rk-button{width:100%}

  .rv-card{width:180px;height:320px}
  .rv-strip::before,.rv-strip::after{width:40px}
  .faq-item summary{padding:18px 0;font-size:17px}

  .final{padding:60px var(--gut)}
  .final-rat{max-width:220px}
  .final .hero-cta .rk-button{flex:1 1 100%}
  .rk-final{padding:48px var(--gut);gap:22px}
  .rk-final>div,.rk-final .rk-button{width:100%}

  .rk-footer{grid-template-columns:1fr;gap:28px;padding:40px var(--gut) 36px}
  dialog{padding:30px 22px}

  .doc-hero{padding:36px var(--gut) 28px}
  .doc-hero h1{max-width:none;font-size:clamp(28px,8.6vw,40px)}
  .doc-hero p{margin-top:14px;font-size:15.5px}
  .doc-main{padding-top:26px}
  .doc-sec{padding-bottom:44px}
  .doc-sec+.doc-sec{padding-top:40px}
  .doc-sec>h2{font-size:clamp(26px,7vw,34px)}
  .doc-list>li,.pay-list li,.guard-list li{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .doc-list>li>em,.pay-list em,.pay-list i,.guard-list em{grid-column:1;text-align:left}
  .step-row{grid-template-columns:1fr;gap:0;padding:26px 0}
  .step-idx{grid-row:auto;margin-bottom:10px}
  .step-row h3,.step-row .step-text,.step-tags,.step-shot{grid-column:1}
  .step-shot{max-width:none}
  .rk-tbl th,.rk-tbl td{padding:12px 14px}
  .wt-formula{padding:20px;font-size:15.5px}
  .doc-legal h2{display:block;font-size:clamp(22px,6vw,30px)}
  .doc-legal .sec-n{display:block;min-width:0;margin-bottom:6px}
  .doc-card{padding:20px}
  .section-heading--gap{margin-top:52px}
  .form-row{grid-template-columns:1fr}
  .form-foot{gap:16px}
  .form-foot .rk-button{width:100%}
  .contact-grid{grid-template-columns:1fr}
  .contact-aside .rk-button{width:100%}
  .rk-lb{padding:16px}
}

/* ═══ Мигание русского текста до перевода ══════════════════════════════════ */
html:not([data-i18n-ready]) body>*:not(script):not(style){visibility:hidden}
html[data-i18n-ready] body{animation:rkFadeIn .18s ease-out}
@keyframes rkFadeIn{from{opacity:.5}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .rk-rise{opacity:1;transform:none}
  .ticker-track,.wall-track,.rv-track{animation:none!important}
  .wall-row,.ticker{overflow-x:auto}
}