/* ZoogVPN Help Center — all classes hc- prefixed to avoid Tailwind utility collisions */
.hc{--hc-bg:#0E141B;--hc-surface:#151C24;--hc-surface2:#1B242E;--hc-accent:#9AD200;--hc-accent-h:#AEE31A;
--hc-text:#E8EEF7;--hc-muted:#9AA6B2;--hc-border:rgba(255,255,255,.09);--hc-radius:12px;
color:var(--hc-text);background:var(--hc-bg);}
.hc *{box-sizing:border-box;}
.hc a{color:inherit;text-decoration:none;}
.hc-shell{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- hero ---------- */
/* NB: no overflow:hidden here — it would clip the search results dropdown. */
.hc-hero{position:relative;padding:64px 0 56px;text-align:center;
background:radial-gradient(900px 380px at 50% -10%,rgba(154,210,0,.16),transparent 70%),var(--hc-bg);
border-bottom:1px solid var(--hc-border);}
.hc-hero h1{font-size:2.4rem;line-height:1.25;margin:0 0 12px;font-weight:700;}
.hc-hero p{color:var(--hc-muted);font-size:1.05rem;margin:0 auto 28px;max-width:620px;}
.hc-hero-sm{padding:36px 0 30px;text-align:left;}
.hc-hero-sm h1{font-size:1.9rem;margin:6px 0 8px;}
.hc-hero-sm p{margin:0;max-width:720px;}

/* ---------- search ---------- */
/* The search wrapper must sit above the sticky site header (z-50) so the
   results dropdown is never covered by it. */
.hc-search{position:relative;max-width:560px;margin:0 auto;z-index:100;}
.hc-hero-sm .hc-search{margin:18px 0 0;}
.hc-search-i{position:relative;display:flex;align-items:center;}
.hc-search-i svg{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:var(--hc-muted);stroke-width:2;}
.hc-search input{width:100%;padding:14px 16px 14px 46px;border-radius:999px;font-size:1rem;
background:var(--hc-surface);border:1px solid var(--hc-border);color:var(--hc-text);outline:none;transition:border-color .2s;}
.hc-search input::placeholder{color:var(--hc-muted);}
.hc-search input:focus{border-color:var(--hc-accent);}
.hc-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:9999;display:none;
background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius);
box-shadow:0 18px 48px rgba(0,0,0,.5);max-height:min(420px,60vh);overflow:auto;text-align:left;}
.hc-results.hc-open{display:block;}
.hc-r{display:block;padding:12px 16px;border-bottom:1px solid var(--hc-border);}
.hc-r:last-child{border-bottom:0;}
.hc-r:hover,.hc-r.hc-sel{background:var(--hc-surface2);}
.hc-r-t{font-weight:600;font-size:.95rem;margin-bottom:3px;}
.hc-r-s{font-size:.78rem;color:var(--hc-accent);}
.hc-r-x{font-size:.8rem;color:var(--hc-muted);margin-top:4px;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hc-empty{padding:18px 16px;color:var(--hc-muted);font-size:.9rem;}

/* ---------- breadcrumbs ---------- */
.hc-crumb{font-size:.85rem;color:var(--hc-muted);padding:18px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.hc-crumb a:hover{color:var(--hc-accent);}
.hc-crumb span{opacity:.5;}

/* ---------- section grid ---------- */
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:44px 0 8px;}
.hc-card{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-radius);
padding:24px;transition:border-color .2s,transform .2s;display:block;}
.hc-card:hover{border-color:rgba(154,210,0,.5);transform:translateY(-2px);}
/* Bottom breathing room for the /help/ landing page, whose shell has no
   .hc-layout (that element supplies the padding on section/article pages). */
.hc-pb{padding-bottom:72px;}
.hc-card-h{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.hc-card-h:hover h2{color:var(--hc-accent);}
.hc-card-ico{font-size:1.5rem;line-height:1;}
.hc-card h2{font-size:1.12rem;margin:0;font-weight:650;transition:color .2s;}
.hc-card p{color:var(--hc-muted);font-size:.9rem;margin:0 0 14px;line-height:1.6;}
.hc-card ul{list-style:none;margin:0;padding:0;}
.hc-card li{margin:0 0 7px;}
.hc-card li a{font-size:.88rem;color:var(--hc-muted);display:inline-flex;gap:7px;}
.hc-card li a:hover{color:var(--hc-accent);}
.hc-card-n{display:inline-block;margin-top:12px;font-size:.8rem;color:var(--hc-accent);font-weight:600;}
.hc-card-n:hover{color:var(--hc-accent-h);}

/* ---------- layout ---------- */
.hc-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;padding:32px 0 72px;align-items:start;}
.hc-side{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow-y:auto;
border-right:1px solid var(--hc-border);padding-right:18px;}
.hc-side::-webkit-scrollbar{width:6px;}
.hc-side::-webkit-scrollbar-thumb{background:var(--hc-border);border-radius:3px;}
.hc-side-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--hc-muted);
margin:0 0 12px;font-weight:700;}
.hc-nav{list-style:none;margin:0 0 20px;padding:0;}
.hc-nav>li{margin-bottom:4px;}
.hc-nav-s{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
font-size:.9rem;font-weight:600;transition:background .15s,color .15s;}
.hc-nav-s:hover{background:var(--hc-surface);color:var(--hc-accent);}
.hc-nav-s.hc-cur{background:rgba(154,210,0,.1);color:var(--hc-accent);}
.hc-sub{list-style:none;margin:2px 0 8px;padding:0 0 0 30px;}
.hc-sub li{margin:0;}
.hc-sub a{display:block;padding:5px 10px;border-radius:6px;font-size:.845rem;color:var(--hc-muted);line-height:1.5;}
.hc-sub a:hover{color:var(--hc-accent);background:var(--hc-surface);}
.hc-sub a.hc-cur{color:var(--hc-accent);font-weight:600;background:rgba(154,210,0,.09);}

/* ---------- article ---------- */
.hc-main{min-width:0;}
.hc-main h1{font-size:1.95rem;line-height:1.3;margin:0 0 10px;font-weight:700;}
.hc-meta{color:var(--hc-muted);font-size:.84rem;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--hc-border);}
.hc-toc{background:var(--hc-surface);border:1px solid var(--hc-border);border-left:3px solid var(--hc-accent);
border-radius:10px;padding:18px 22px;margin:0 0 30px;}
.hc-toc-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hc-muted);font-weight:700;margin-bottom:10px;}
.hc-toc ol{margin:0;padding-left:20px;}
.hc-toc li{margin:5px 0;font-size:.9rem;}
.hc-toc a{color:var(--hc-muted);}
.hc-toc a:hover{color:var(--hc-accent);}

.hc-body{font-size:1rem;line-height:1.85;}
.hc-body p{margin:0 0 17px;}
.hc-body strong{color:#fff;font-weight:650;}
.hc-body a{color:var(--hc-accent);border-bottom:1px solid rgba(154,210,0,.35);}
.hc-body a:hover{color:var(--hc-accent-h);}
.hc-body .hc-h2{font-size:1.32rem;font-weight:680;margin:40px 0 14px;padding-top:8px;scroll-margin-top:90px;}
.hc-body .hc-h3{font-size:1.08rem;font-weight:650;margin:28px 0 10px;color:#fff;}
.hc-body .hc-h4{font-size:.98rem;font-weight:650;margin:22px 0 8px;color:var(--hc-text);}
.hc-body ul,.hc-body ol{margin:0 0 18px;padding-left:24px;}
.hc-body li{margin:7px 0;}
.hc-body ul.hc-list{list-style:none;padding-left:0;}
.hc-body ul.hc-list>li{position:relative;padding:9px 14px 9px 34px;margin:7px 0;
background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:9px;}
.hc-body ul.hc-list>li:before{content:"";position:absolute;left:14px;top:19px;width:7px;height:7px;
border-radius:50%;background:var(--hc-accent);}
.hc-figure{margin:24px 0;}
.hc-img{width:100%;height:auto;border-radius:10px;border:1px solid var(--hc-border);display:block;}
.hc-figure figcaption{color:var(--hc-muted);font-size:.82rem;margin-top:9px;text-align:center;}
.hc-tablewrap{overflow-x:auto;margin:22px 0;border:1px solid var(--hc-border);border-radius:10px;}
.hc-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px;}
.hc-table th,.hc-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--hc-border);vertical-align:top;}
.hc-table thead th{background:var(--hc-surface2);font-weight:650;color:#fff;white-space:nowrap;}
.hc-table tbody tr:last-child td{border-bottom:0;}
.hc-table tbody tr:hover{background:rgba(255,255,255,.02);}

/* ---------- article list on section page ---------- */
.hc-arts{display:grid;gap:12px;margin:26px 0 0;}
.hc-art{display:flex;justify-content:space-between;align-items:center;gap:16px;
background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:10px;padding:18px 22px;transition:border-color .2s;}
.hc-art:hover{border-color:rgba(154,210,0,.5);}
.hc-art-t{font-weight:600;font-size:1rem;margin-bottom:4px;}
.hc-art-x{color:var(--hc-muted);font-size:.85rem;line-height:1.55;}
.hc-art-a{color:var(--hc-accent);font-size:1.1rem;flex-shrink:0;}

/* ---------- prev / next ---------- */
.hc-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hc-border);}
.hc-pn-i{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:10px;padding:15px 18px;transition:border-color .2s;}
.hc-pn-i:hover{border-color:rgba(154,210,0,.5);}
.hc-pn-l{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--hc-muted);margin-bottom:5px;}
.hc-pn-t{font-size:.92rem;font-weight:600;line-height:1.45;}
.hc-pn-n{text-align:right;}
.hc-pn-e{border:0;background:none;}

/* ---------- contact CTA ---------- */
.hc-cta{margin:52px 0 0;padding:34px;text-align:center;border-radius:var(--hc-radius);
border:1px solid var(--hc-border);background:linear-gradient(150deg,rgba(154,210,0,.09),var(--hc-surface));}
.hc-cta h2{font-size:1.28rem;margin:0 0 8px;font-weight:680;}
.hc-cta p{color:var(--hc-muted);font-size:.93rem;margin:0 0 20px;}
.hc-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hc-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;
font-weight:650;font-size:.93rem;transition:background .2s,border-color .2s;}
.hc-btn-p{background:var(--hc-accent);color:#0E141B;}
.hc-btn-p:hover{background:var(--hc-accent-h);}
.hc-btn-s{border:1px solid var(--hc-border);color:var(--hc-text);}
.hc-btn-s:hover{border-color:var(--hc-accent);color:var(--hc-accent);}

/* ---------- mobile ---------- */
.hc-side-btn{display:none;width:100%;padding:12px 16px;margin:16px 0 0;border-radius:10px;
background:var(--hc-surface);border:1px solid var(--hc-border);color:var(--hc-text);
font-size:.92rem;font-weight:600;cursor:pointer;text-align:left;}
@media(max-width:900px){
  .hc-layout{grid-template-columns:1fr;gap:0;padding-top:8px;}
  .hc-side{position:static;max-height:none;border-right:0;padding-right:0;display:none;
    border:1px solid var(--hc-border);border-radius:10px;padding:16px;margin:12px 0 22px;}
  .hc-side.hc-open{display:block;}
  .hc-side-btn{display:block;}
  .hc-hero h1{font-size:1.85rem;}
  .hc-hero{padding:44px 0 40px;}
  .hc-main h1{font-size:1.55rem;}
  .hc-pn{grid-template-columns:1fr;}
  .hc-pn-n{text-align:left;}
  .hc-grid{grid-template-columns:1fr;padding-top:30px;}
  .hc-cta{padding:26px 20px;}
}