/* Страницы /vpn/* и /help/*: добавки к blog.css. Цвета и шрифты те же (переменные из :root в blog.css). */
.page-screen .article-heading .breadcrumbs [aria-current=page]{color:var(--paper)}
.page-screen .article-date{margin-top:20px}
.page-screen .article-reader{min-width:0}
.page-screen :is(a,summary,button):focus-visible{outline-color:var(--pine)}
.page-screen .page-cta :is(a,button):focus-visible{outline-color:var(--pink)}
.page-faq{margin-top:46px}
.page-faq h2{font:400 26px/1.35 var(--display);letter-spacing:-.033em;margin:0 0 20px;scroll-margin-top:115px}
.page-faq details{border:1px solid #bdd4b5;border-radius:12px;background:#e0ecd8;margin-bottom:10px}
.page-faq summary{position:relative;display:block;cursor:pointer;list-style:none;padding:17px 54px 17px 20px;font-size:17px;font-weight:550;line-height:1.45}
.page-faq summary::-webkit-details-marker{display:none}
.page-faq summary::after{content:'';position:absolute;right:21px;top:50%;width:9px;height:9px;border-right:2px solid #306a3d;border-bottom:2px solid #306a3d;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.page-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-body{padding:0 20px 19px;font-size:16px;line-height:1.7;color:#47604c;overflow-wrap:anywhere}
.faq-body p{margin:0}
.faq-body a{text-decoration:underline;text-underline-offset:3px}
.page-cta{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:center;margin-top:46px;padding:26px 28px;border-radius:16px;background:var(--pine);color:var(--paper)}
.page-cta img{width:64px;height:64px;object-fit:contain}
.page-cta h2{margin:0 0 7px;font:400 22px/1.3 var(--display);letter-spacing:-.03em;color:var(--mint)}
.page-cta p{font-size:15px;line-height:1.6;color:var(--muted)}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.page-links{margin-top:40px}
.page-links h2{margin:0 0 16px;font:400 22px/1.35 var(--display);letter-spacing:-.03em}
.link-list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.link-list li{margin:0;padding:0}
.link-list a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #b9d0b6;border-radius:10px;background:#e0ecd8;font-size:15px;font-weight:500;transition:border-color .2s,transform .2s}
.link-list a:hover{border-color:#306a3d;transform:translateY(-2px)}
.hub-body{padding:45px 0 70px}
.hub-intro{max-width:790px;margin-bottom:34px}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hub-card{display:flex;flex-direction:column;padding:24px;border:1px solid #bcd3b6;border-radius:15px;background:#e0ecd8;transition:transform .2s,box-shadow .2s}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px #6c987154}
.hub-card h2{margin:0 0 11px;font:400 20px/1.35 var(--display);letter-spacing:-.027em}
.hub-card p{margin:0 0 18px;font-size:15px;line-height:1.6;color:#47604c}
.hub-more{margin-top:auto;font-size:14px;font-weight:550}
.hub-more::after{content:' \2192'}
@media(max-width:1120px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-cta{padding:24px}}
@media(max-width:820px){.page-cta{grid-template-columns:minmax(0,1fr);gap:16px}.page-cta img{display:none}}
@media(max-width:580px){.hub-grid{grid-template-columns:minmax(0,1fr)}.hub-body{padding:30px 0 48px}.page-faq{margin-top:38px}.page-faq h2{font-size:23px}.page-faq summary{font-size:16px;padding:15px 48px 15px 16px}.faq-body{padding:0 16px 17px}.page-cta{margin-top:38px;padding:22px 20px}.page-cta h2{font-size:20px}.cta-actions .btn{flex:1 1 100%}.page-links{margin-top:34px}.link-list a{width:100%}}
@media print{.page-cta,.page-links{display:none!important}.page-faq details{border:0;background:none}.page-faq details>*{display:block!important}}