/* Shared by every page. Lifted out of index.html so the three secondary pages
   cannot drift away from the one people see first — a security page styled
   like a different site reads as a different site. */
:root {
  --bg:#0A0C11; --elev:#0D0F16; --surface:#11141C; --border:#232936; --border-dim:#161A24;
  --text:#EDF1F7; --dim:#8A93A5; --muted:#5A6478;
  --primary:#6C4CF2; --primary-hi:#8B72FF; --primary-text:#A995FF; --primary-wash:rgba(108,76,242,.14);
  --ok:#3FAE7C; --warn:#D19A3C;
  --r:10px; --r-lg:14px; --measure:68ch;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.7 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:820px; margin:0 auto; padding:0 24px; }
a { color:var(--primary-text); }
code { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; font-size:.9em;
       background:var(--surface); padding:1px 5px; border-radius:4px; }

.topbar { border-bottom:1px solid var(--border-dim); padding:18px 0; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
/* Mark beside a wordmark. The stacked lockup belongs on the hero, where it has
   room; at header height its three elements collapse into a smudge. */
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { display:block; width:30px; height:30px; }
.brand span { font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
.brand b { font-weight:600; color:var(--primary-text); }
.topbar nav { display:flex; gap:20px; font-size:14px; }
.topbar nav a { color:var(--dim); text-decoration:none; }
.topbar nav a:hover, .topbar nav a[aria-current] { color:var(--text); }

main { padding:56px 0 72px; }
h1 { font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 10px; letter-spacing:-.02em; }
.lede { color:var(--dim); font-size:17px; max-width:var(--measure); margin:0 0 40px; }
h2 { font-size:21px; margin:44px 0 10px; letter-spacing:-.01em; }
h3 { font-size:16px; margin:28px 0 6px; }
p, li { max-width:var(--measure); color:var(--dim); }
p strong, li strong { color:var(--text); }
ul { padding-left:20px; }
li { margin:8px 0; }

table { width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px; }
th { text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--border);
     font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
td { padding:10px 12px 10px 0; border-bottom:1px solid var(--border-dim); color:var(--dim);
     vertical-align:top; }
td:first-child { color:var(--text); white-space:nowrap; }

.card { background:var(--surface); border:1px solid var(--border-dim); border-radius:var(--r-lg);
        padding:20px 22px; margin:22px 0; }
.card.warn { border-color:rgba(209,154,60,.34); background:rgba(209,154,60,.08); }
.card.ok   { border-color:rgba(63,174,124,.34); background:rgba(63,174,124,.08); }
.card p:last-child { margin-bottom:0; }
.card p:first-child { margin-top:0; }

.updated { color:var(--muted); font-size:13px; }

footer { border-top:1px solid var(--border-dim); padding:36px 0 64px; color:var(--muted); font-size:13.5px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer a { color:var(--dim); }