/* ───────────────────────────────────────────────────────────────────────────
   Signet — landing design system.

   The palette and the two typefaces are lifted from the app, which in turn
   took them from Mullvad: navy surfaces, one bright yellow accent, flat
   panels, square-ish corners, no gradients, no blur, no glow. If a colour
   here changes, change it in the app's theme/Color.kt too — they are meant
   to be the same product.

   Fonts are SELF-HOSTED (font/*.woff2, subset to Latin + Cyrillic, 82 KB for
   five faces). A privacy product must not send its visitors to Google's font
   CDN to read a page about not being tracked.
   ─────────────────────────────────────────────────────────────────────────── */

/* Source Sans 3 — headings, numbers, UI-ish text (Mullvad's display face). */
@font-face{font-family:'Source Sans 3';src:url('/font/source-sans-3-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/font/source-sans-3-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/font/source-sans-3-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Open Sans — running prose. */
@font-face{font-family:'Open Sans';src:url('/font/open-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/font/open-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Mullvad's blues, as the app uses them. */
  --bg:#0e1f33;            /* one step under --blue-dark */
  --surface:#192e45;       /* --blue-dark */
  --soft:#1f3853;
  --softer:#274361;
  --border:#2f5074;        /* ~--blue */
  --border-sub:#1e3a56;
  --divider:#1b3149;

  --text:#f4f7fa;          /* cool off-white; a warm paper tone goes muddy on blue */
  --mid:#a9bcd2;
  --muted:#99afc7;
  /* The app's `faint` is #55708c, but on the web every one of these tokens
     ends up carrying real sentences (small print, footer, code comments),
     and #55708c is 3.2:1 on the page background — under AA for body text.
     Lightened to #8199b6: 5.7:1 on --bg, 4.7:1 on --surface. Measured, not
     eyeballed; recheck with a contrast calculator if you change it. */
  --faint:#8199b6;

  --accent:#ffd524;        /* --yellow — the ONLY accent. Used for actions, not decoration. */
  --accent-dim:#e6bf1f;
  --ink:#102338;           /* text on top of the accent */
  --success:#44ad4d;
  --danger:#e34039;
  --amber:#f2b33d;

  --r:8px;                 /* panels */
  --rb:4px;                /* buttons, pills, code */
  --wrap:1040px;
  --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Source Sans 3','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:var(--mono);font-size:.88em}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
section{padding:56px 0}
section+section{border-top:1px solid var(--divider)}
@media(max-width:640px){section{padding:40px 0}}

/* ── typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,6.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2;margin-bottom:14px}
h3{font-size:19px;line-height:1.35;margin-bottom:6px}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--mid);line-height:1.6}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:14px;line-height:1.6}
.eyebrow{
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px;
}
ul.plain{margin:0 0 14px;padding-left:22px}
ul.plain li{margin-bottom:7px}
ul.plain li::marker{color:var(--faint)}

/* ── header / nav ───────────────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--divider);background:var(--bg)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;font-size:19px;color:var(--text);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{width:28px;height:28px;border-radius:6px}
.navlinks{margin-left:auto;display:flex;gap:22px;font-size:15px}
.navlinks a{color:var(--mid)}
.navlinks a:hover{color:var(--text);text-decoration:none}
/* Under ~760px the four links no longer fit beside the wordmark: they wrapped
   onto three lines, overlapped the brand and cut "Приватность" off at the right
   edge. Drop them to their own row and let THAT row scroll sideways — the links
   stay reachable, nothing is clipped, and the page body still never scrolls
   horizontally. No hamburger: four anchors do not need a menu. */
@media(max-width:760px){
  .topbar .wrap{height:auto;padding:12px 20px;flex-wrap:wrap;gap:10px}
  .navlinks{margin-left:0;width:100%;gap:18px;font-size:14px;
    overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{flex:0 0 auto}
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:72px 0 56px}
.hero h1{margin-bottom:18px;max-width:16em}
.hero .lead{max-width:34em}
@media(max-width:640px){.hero{padding:44px 0 36px}}

/* ── buttons ────────────────────────────────────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-weight:600;font-size:17px;padding:13px 24px;border-radius:var(--rb);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-dim)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--soft)}
.btn svg{flex:0 0 auto}

/* ── status pill (live /healthz) ────────────────────────────────────────── */
.status{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--display);font-size:14px;font-weight:600;
  padding:7px 14px;border-radius:999px;border:1px solid var(--border-sub);
  background:var(--surface);color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.status.ok{color:var(--text)}.status.ok .dot{background:var(--success)}
.status.bad{color:var(--text)}.status.bad .dot{background:var(--danger)}

/* ── feature stream (one claim per block, Telegram-style) ───────────────── */
.feature{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--divider)}
.feature:last-child{border-bottom:none}
.feature .ico{width:44px;height:44px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--border-sub);display:flex;align-items:center;justify-content:center}
.feature p{color:var(--mid);margin:0}
@media(max-width:560px){
  .feature{grid-template-columns:44px 1fr;gap:14px}
}

/* ── panels & rows (facts, not decoration) ─────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border-sub);border-radius:var(--r)}
.panel-pad{padding:20px 22px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 22px;border-top:1px solid var(--divider);font-size:15px}
.row:first-child{border-top:none}
.row .k{color:var(--muted);font-family:var(--display);flex:0 0 auto}
.row .v{font-family:var(--mono);font-size:13.5px;text-align:right;word-break:break-all}
.row .v.live{color:var(--success)}
.row .v.hash{color:var(--accent);font-size:12.5px;line-height:1.5}

/* Numbered steps — no illustrations, just the order of operations. */
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--divider)}
.steps li:first-child{border-top:none}
.steps li::before{
  content:counter(s);font-family:var(--display);font-weight:700;font-size:15px;
  width:28px;height:28px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.steps strong{font-weight:600;color:var(--text)}
.steps p{color:var(--mid);margin:2px 0 0;font-size:15px}

/* ── notes: the page has to be able to say "this is not true yet" ───────── */
.note{border-left:3px solid var(--border);padding:2px 0 2px 16px;color:var(--mid);
  font-size:15.5px;margin:18px 0}
.note.warn{border-left-color:var(--amber)}
.note.warn strong{color:var(--text)}
.cmd{font-family:var(--mono);font-size:13px;background:var(--surface);
  border:1px solid var(--border-sub);border-radius:var(--rb);padding:2px 7px;
  color:var(--text);white-space:nowrap}
.pre{font-family:var(--mono);font-size:13px;background:var(--surface);
  border:1px solid var(--border-sub);border-radius:var(--r);padding:16px 18px;
  overflow-x:auto;color:var(--text);line-height:1.6;margin:0 0 14px}
.pre .c{color:var(--faint)}

/* Truth table: what the server can and cannot see. */
.tbl{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-top:1px solid var(--divider);
  vertical-align:top}
.tbl th{font-family:var(--display);font-weight:600;color:var(--muted);font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;border-top:none;white-space:nowrap}
.tbl td:first-child{color:var(--text);white-space:nowrap}
/* On a narrow screen the nowrap first column measured 231px of a 327px
   container, so the third column ("how exactly" — the part that carries the
   actual explanation) started past the right edge and was invisible until the
   reader thought to drag the table sideways. Let the first two columns wrap
   there: the table still scrolls inside itself if it must, but all three
   columns are on screen. Measured at 375px, not guessed. */
@media(max-width:640px){
  .tbl td:first-child,.tbl th{white-space:normal}
  .tbl th,.tbl td{padding:11px 10px;font-size:14px}
}
.yes{color:var(--success);font-weight:600}
.no{color:var(--muted)}
.part{color:var(--amber);font-weight:600}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--divider);padding:36px 0 56px;color:var(--faint);font-size:14px}
footer .flinks{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:14px}
footer .flinks a{color:var(--mid)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}