/* PassportVPN shared styles: every page links this. Page-only rules stay inline in that page.
   Fonts: self-hosted (OFL-1.1), so a buyer's browser asks no third party for them. */
@font-face { font-family:"Space Grotesk"; src:url(/assets/spacegrotesk-700.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url(/assets/spacegrotesk-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url(/assets/plexsans-400.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url(/assets/plexsans-500.woff2) format("woff2"); font-weight:500; font-display:swap; }

:root {
  --bg:#0B0F14;        /* near-black, everywhere */
  --signal:#C4F23A;    /* the only accent, lime: buttons and highlights */
  --text:#EEF0F2;      /* off-white */
  --muted:#8B97A3;     /* body and secondary */
  --rule:#232B34;      /* hairlines */
  --chip:#2F3943;      /* chip outlines */
  --display:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter:20px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 16px/1.6 var(--body); overflow-wrap:break-word; }
a { color:inherit; }
::selection { background:var(--signal); color:var(--bg); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 var(--gutter); }
h1, h2, h3, p { margin:0; }
h1, h2, h3 { font-family:var(--display); font-weight:700; }

/* ---------- top bar ---------- */
.bar { display:flex; align-items:center; gap:16px; height:64px; border-bottom:1px solid var(--rule); }
.brand { display:flex; align-items:center; gap:10px; font:700 18px/1 var(--display); letter-spacing:-.02em; text-decoration:none; }
.brand i { width:10px; height:10px; background:var(--signal); display:block; }
.nav { display:flex; gap:16px; margin-left:auto; font:500 14px/1 var(--display); }
.nav a { color:var(--muted); text-decoration:none; padding:8px 0; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--text); }
.nav a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:6px; }

/* ---------- footer ---------- */
/* footer.wrap, not footer: .wrap's margin/padding shorthands would otherwise win and zero these */
footer.wrap { margin-top:72px; padding-bottom:40px; }
footer .foot-links { padding-top:24px; border-top:1px solid var(--rule); }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px; font:500 14px/1.4 var(--display); }
.foot-links a { color:var(--text); text-decoration-color:var(--signal); text-underline-offset:4px; }
.fine { color:var(--muted); font-size:13px; line-height:1.6; max-width:52em; }
.fine + .fine { margin-top:8px; }
.fine a { color:var(--text); text-decoration-color:var(--signal); text-underline-offset:3px; }

/* ---------- policy pages ---------- */
.prose { max-width:42em; padding-top:48px; }
.prose h1 { font-size:clamp(36px, 9vw, 64px); line-height:1; letter-spacing:-.04em; }
.prose .updated { margin-top:12px; color:var(--muted); font-size:14px; }
.prose .mor { margin-top:28px; padding:16px 18px; border-left:3px solid var(--signal); background:#111820; color:var(--text); }
.prose h2 { margin-top:40px; font-size:22px; line-height:1.2; letter-spacing:-.025em; }
.prose p, .prose li { color:var(--muted); font-size:16px; line-height:1.65; }
.prose p { margin-top:12px; }
.prose ul { margin:12px 0 0; padding-left:1.2em; }
.prose li + li { margin-top:6px; }
.prose strong { color:var(--text); font-weight:500; }
.prose a { color:var(--text); text-decoration-color:var(--signal); text-underline-offset:4px; }

@media (min-width:760px) {
  :root { --gutter:40px; }
  .bar { height:76px; }
  .nav { gap:28px; font-size:15px; }
  .prose { padding-top:88px; }
}