/* Справка в виде новой главной, вариант «Для чтения, с шапкой и подвалом сайта» (13.10.2026).
   Кладётся ПОСЛЕ help.v9.css. Исходники: vpn/help-newlook-2026-10-13/src/nl_a.css, nl_b.css, nl_c.css. */
/* Справка, слой A «Перекраска»: шрифт текста и цвета новой главной. Кладётся ПОСЛЕ help.v9.css и tour.v7.css.
   Устройство страниц, размеры и обе темы (светлая и тёмная) остаются как были. */
@font-face{font-family:'Onest';font-weight:400 800;font-style:normal;font-display:swap;src:url(/home/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-weight:400 800;font-style:normal;font-display:swap;src:url(/home/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+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-weight:400 800;font-style:normal;font-display:swap;src:url(/home/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+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113}

/* светлая тема: тот же вид, акцент ближе к фиолетовому главной */
:root{
  --accent:#5B4FE8; --accent-strong:#5B5FFF; --accent-ink:#4A3FD6; --accent-wash:#EEEDFE;
  --wordmark:linear-gradient(92deg,#5B5FFF 0%,#7A56E8 50%,#2E8BE0 100%);
  --nl-grad:linear-gradient(100deg,#5B5FFF,#8B5CF6 55%,#4A7DFF);
}
/* тёмная тема: палитра новой главной; мелкий текст чуть светлее прежнего, чтобы читался */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#070919; --raised:#11153A; --sunken:#0A0D22; --line:#272C5A; --hair:#1A1E44;
    --ink:#EEF0FF; --ink-2:#C3C9EE; --ink-3:#969DCB;
    --accent:#A99BFF; --accent-strong:#6C5CF7; --accent-ink:#C4B5FF; --accent-wash:#1C1F4E;
    --ok:#3DDC97; --ok-wash:#0D2A22; --warn:#F0C36A; --warn-wash:#2A2010; --warn-line:#4A3A17;
    --wordmark:linear-gradient(92deg,#B4A2FF 0%,#9DB4FF 48%,#86DBFF 100%);
  }
}
:root[data-theme="dark"]{
  --ground:#070919; --raised:#11153A; --sunken:#0A0D22; --line:#272C5A; --hair:#1A1E44;
  --ink:#EEF0FF; --ink-2:#C3C9EE; --ink-3:#969DCB;
  --accent:#A99BFF; --accent-strong:#6C5CF7; --accent-ink:#C4B5FF; --accent-wash:#1C1F4E;
  --ok:#3DDC97; --ok-wash:#0D2A22; --warn:#F0C36A; --warn-wash:#2A2010; --warn-line:#4A3A17;
  --wordmark:linear-gradient(92deg,#B4A2FF 0%,#9DB4FF 48%,#86DBFF 100%);
}
body{font-family:'Onest','Manrope',system-ui,-apple-system,sans-serif}
.hlang{font-family:inherit}
.btnrow a{border-radius:14px}
.btnrow a.pri,.hres-ask,.helpful-ask,.tabs .pill{background:var(--nl-grad)}

/* узкие экраны (до 350 px): на сайте сейчас шапка, вкладки и таблицы вылезают за край и страницу можно сдвинуть вбок */
.tabs{grid-auto-columns:minmax(0,1fr);max-width:min(26rem,100%)}
.tabs button{min-width:0}
@media (max-width:380px){
  .tabs button{padding-left:.15rem;padding-right:.15rem;font-size:.95rem}
  .tabs button small{font-size:.7rem}
  th,td{padding-left:.5rem;padding-right:.5rem;overflow-wrap:anywhere}
}
@media (max-width:350px){
  header{padding:0 .75rem;gap:.4rem}
  .tools{gap:.15rem}
  .brand{column-gap:.4rem}
  .brand b{font-size:.86rem}
  .hbar{padding-left:.75rem;padding-right:.75rem}
}
@media (max-width:310px){
  .brand svg{display:none}
  .brand b{font-size:.8rem}
  .tabs button{font-size:.88rem}
  .tabs button small{font-size:.64rem}
  th,td{padding-left:.35rem;padding-right:.35rem;font-size:.9rem}
}
/* название в шапке ведёт на начало справки: область нажатия не ниже 44 px */
.brand{min-height:2.75rem;align-content:center}
/* длинная команда в тексте переносится, а не раздвигает страницу; «Назад» и «Дальше» на самом узком экране друг под другом */
main code{overflow-wrap:anywhere}
.pager a{min-width:0}
@media (max-width:350px){
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a.next:only-child{grid-column:1}
}
/* длинное слово в заголовке на самом узком экране */
h1{overflow-wrap:break-word}
@media (max-width:330px){h1{font-size:1.45rem}}
/* Справка, слой B «Для чтения» (поверх слоя A): сначала удобно читать, потом красиво.
   Крупнее текст и свободнее строки, спокойные заголовки разделов, заметнее подсказки и ссылки, крупнее меню.
   Разметка и скрипты страниц не меняются. */
:root{--measure:68ch}
/* в тёмной теме основной текст светлее: длинные абзацы читаются без напряжения */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink-2:#D3D8F6; --ink-3:#A3AAD6 } }
:root[data-theme="dark"]{ --ink-2:#D3D8F6; --ink-3:#A3AAD6 }

body{font-size:1.125rem;line-height:1.68}
p,li,td,.callout,.lead,.card b,.btnrow a,.quick a,.pager b,.callout .ttl,.diag h3,.hres a b,.tabs button{letter-spacing:0}
h1{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.3rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin-bottom:.7rem}
/* заголовки разделов обычным шрифтом текста: глаз быстрее находит нужный раздел */
h2{font-family:inherit;font-size:clamp(1.3rem,1.15rem + .6vw,1.55rem);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:1.2rem;line-height:1.55;color:var(--ink-2)}
.eyebrow{font-size:.84rem}
/* ссылки в тексте подчёркнуты: видно, что это ссылка, не только по цвету */
main p a,main li a,.callout a,figcaption a,td a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* меню разделов */
.grp h4{font-size:.8rem}
.grp a{font-size:1.02rem;padding:.6rem .8rem;line-height:1.35}
.grp a.on{box-shadow:inset 3px 0 0 var(--accent)}
.grp a.out{font-size:.97rem}
.hsearch input{font-size:1.02rem;padding-top:.75rem;padding-bottom:.75rem}
.hres a b{font-size:1rem}
.hres a span{font-size:.86rem}
aside.toc{font-size:.97rem}
aside.toc h5{font-size:.78rem}
aside.toc a{padding:.34rem 0;color:var(--ink-2)}

/* содержимое */
.chip{font-size:.92rem;padding:.4rem .85rem}
ol.steps>li{padding-bottom:2.1rem}
ol.steps p{margin-bottom:.8rem}
figcaption{font-size:.93rem;line-height:1.45;max-width:36ch;color:var(--ink-2)}
/* подсказки: цветная полоса слева и обычный цвет текста, чтобы предупреждение читалось, а не просто желтело */
.callout{font-size:1.02rem;line-height:1.58;padding:1rem 1.15rem 1rem 1.2rem;border-left:3px solid var(--line)}
.callout.tip{border-left-color:var(--ok)}
.callout.warn{border-left-color:var(--warn)}
.callout.warn p{color:var(--ink)}
.callout .ttl{font-size:1.02rem;margin-bottom:.35rem}
table{font-size:1.02rem}
th{font-size:.8rem}
.diag h3{font-size:1.08rem}
.diag ol{font-size:1.02rem}
.diag .note{font-size:.9rem}
.btnrow a{font-size:1.03rem;padding:.8rem 1.25rem}
.quick a{font-size:1.02rem;padding:.95rem 1rem}
.card b{font-size:1.06rem}
.card span{font-size:.93rem;color:var(--ink-2)}
.tabs button{font-size:1.05rem}
.tabs button small{font-size:.84rem}
.pager span{font-size:.82rem}
.pager b{font-size:1.03rem}
.helpful-ask-row b,.helpful-ask-row button{font-size:1rem}
.helpful-out p,.helpful-links a{font-size:.98rem}
.helpfoot{font-size:.98rem}
.helpfoot .ask b{font-size:1.02rem}
.helpfoot .legal{font-size:.92rem}
.helpfoot .updated{font-size:.88rem}
@media (max-width:999px){
  body{font-size:1.0938rem;line-height:1.64}
  .lead{font-size:1.14rem}
  .grp a{font-size:1.06rem;padding:.72rem .8rem}
}
/* длинная подпись кнопки (адрес почты) на узком экране переносится, а не вылезает за край */
.btnrow a{max-width:100%;overflow-wrap:anywhere}
@media (max-width:330px){h1{font-size:1.45rem}}
/* Справка, слой C «Для чтения, с шапкой и подвалом сайта» (поверх слоёв A и B).
   В шапке справки стоят те же разделы, что на всём сайте, внизу общий подвал. Поиск, меню разделов, язык и тема остаются. */
@media (min-width:1000px){
  .hnav{gap:1.35rem;font-size:1rem}
  .hnav a[aria-current]{color:var(--ink);font-weight:600}
  .hnav a.nl-login{margin-left:.4rem;font-weight:600;color:var(--ink)}
}
/* подвал сайта внутри справки берёт цвета текущей темы справки */
.smn-foot{
  --n-bg:var(--sunken); --n-line:var(--hair); --n-line2:var(--line); --n-text:var(--ink); --n-soft:var(--ink-2); --n-muted:var(--ink-3);
  --n-panel2:var(--raised); --n-cyan:var(--accent); --n-word:var(--wordmark); --n-display:'Unbounded',sans-serif; --n-body:inherit;
  position:relative;z-index:1;margin:0;border-top:1px solid var(--n-line);padding:44px 0 48px;background:var(--n-bg);font-size:1rem;line-height:1.55;color:var(--n-muted);text-align:left}
.smn-foot,.smn-foot *{box-sizing:border-box}
.smn-foot a{color:inherit;text-decoration:none}
.smn-in{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.smn-foot .smn-in{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.smn-brand{display:flex;align-items:center;gap:10px;font:700 16px var(--n-display);letter-spacing:-.01em;white-space:nowrap;color:var(--n-text)}
.smn-brand img{display:block;width:30px;height:30px}
.smn-word{background:var(--n-word);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.smn-foot h4{margin:0 0 10px;padding:0;font:600 .88rem inherit;font-family:inherit;letter-spacing:0;text-transform:none;color:var(--n-soft)}
.smn-foot a{display:block;padding:7px 0;font-size:1rem;font-weight:400}
.smn-foot a.smn-brand{display:flex;padding:0}
.smn-foot p{margin:10px 0 0;padding:0;max-width:300px;font-size:1rem;line-height:1.55;color:var(--n-muted)}
.smn-copy{grid-column:1/-1;border-top:1px solid var(--n-line);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.smn-langs{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border:1px solid var(--n-line2);border-radius:999px}
.smn-langs svg{width:17px;height:17px;margin-right:6px;color:var(--n-muted)}
.smn-foot .smn-langs span,.smn-foot .smn-langs a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;font-weight:600;font-size:.94rem}
.smn-foot .smn-langs span{background:var(--n-panel2);color:var(--n-text)}
@media (hover:hover) and (pointer:fine){.smn-foot a:hover{color:var(--n-text)}}
@media (max-width:900px){
  .smn-in{padding:0 1.125rem}
  .smn-foot{padding-bottom:40px}
  .smn-foot .smn-in{grid-template-columns:1fr 1fr;gap:26px}
  .smn-about{grid-column:1/-1}
  .smn-foot a{padding:11px 0}
  .smn-foot .smn-langs a,.smn-foot .smn-langs span{min-height:40px}
}
/* свои юридические ссылки в конце страницы остаются, но без повтора того, что есть в подвале, они не мешают */
/* круглая кнопка «наверх» справки закреплена справа внизу: оставляем под ней место, чтобы не закрывала переключатель языка */
@media (min-width:901px){.smn-foot{padding-bottom:92px}}