/* ═══════════════════════════════════════════════════════════
   page.css — shared shell for the content pages
   (privacy, terms, about). The app itself uses app.css.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1020;
  --brand:#2341F5;
  --muted:#5F6883;
  --faint:#8892AB;
  --line:#E4E7F2;
  --soft:#F6F7FB;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Poppins","Segoe UI","Liberation Sans",sans-serif;
  color:var(--ink);
  background:var(--soft);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--brand); }
a:hover{ text-decoration:none; }

/* ───────── top bar ───────── */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar .in{
  max-width:820px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.logo{
  display:flex; align-items:center; gap:9px;
  font-size:16px; font-weight:700; letter-spacing:-0.4px;
  color:var(--ink); text-decoration:none;
}
.logo b{ color:var(--brand); }
.logo svg{ width:26px; height:26px; border-radius:7px; display:block; }
.topbar nav{ margin-left:auto; display:flex; gap:18px; font-size:13px; }
.topbar nav a{ color:var(--muted); text-decoration:none; }
.topbar nav a:hover, .topbar nav a[aria-current="page"]{ color:var(--brand); }

/* ───────── article ───────── */
main{ max-width:820px; margin:0 auto; padding:38px 24px 20px; }

.doc{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:44px 48px;
}
.kicker{
  font-family:"JetBrains Mono","DejaVu Sans Mono",monospace;
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--faint);
}
h1{ font-size:34px; line-height:1.2; letter-spacing:-1px; margin:10px 0 8px; }
.updated{ font-size:13px; color:var(--faint); margin:0 0 30px; }
h2{
  font-size:19px; letter-spacing:-0.4px; margin:34px 0 10px;
  padding-top:22px; border-top:1px solid var(--line);
}
h2:first-of-type{ border-top:none; padding-top:0; margin-top:26px; }
h3{ font-size:15px; margin:22px 0 6px; }
p, li{ font-size:15px; color:#252C42; }
ul, ol{ padding-left:22px; }
li{ margin-bottom:7px; }
strong{ color:var(--ink); }

.lede{ font-size:17px; color:#2C3450; }

.callout{
  background:var(--soft); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:8px;
  padding:16px 20px; margin:22px 0;
}
.callout p{ margin:0; font-size:14.5px; }
.callout p + p{ margin-top:9px; }
.callout.warn{ border-left-color:#B45309; background:#FFFBF3; border-color:#F3E3C8; }

table.tbl{ width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; }
table.tbl th, table.tbl td{
  border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top;
}
table.tbl th{ background:var(--soft); font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }

/* ───────── profile card (about) ───────── */
.profile{
  display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
  padding:26px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,#fff, var(--soft));
  margin:26px 0 10px;
}
.avatar{
  flex:0 0 84px; width:84px; height:84px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:29px; font-weight:700; letter-spacing:-1px;
}
.profile .who{ flex:1 1 320px; min-width:0; }
.profile h2{
  border:none; padding:0; margin:0 0 4px;
  font-size:25px; letter-spacing:-0.7px;
  display:flex; align-items:center; gap:8px;
}
.profile h2 svg{ width:19px; height:19px; flex:0 0 19px; color:var(--faint); }
.profile .role{ font-size:14.5px; color:#2C3450; margin:0 0 8px; line-height:1.6; }
.profile .loc{ font-size:13.5px; color:var(--faint); margin:0; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.chips span{
  font-size:12px; font-weight:500; color:#2C3450;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:4px 11px;
}
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cta a{
  display:inline-block; padding:10px 18px; border-radius:8px;
  font-size:14px; font-weight:600; text-decoration:none;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
}
.cta a.ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.cta a:hover{ opacity:.9; }

/* ───────── site footer ───────── */
.sitefoot{
  max-width:820px; margin:0 auto; padding:26px 24px 46px;
  font-size:13px; color:var(--faint);
  display:flex; gap:8px 20px; flex-wrap:wrap; align-items:center;
}
.sitefoot nav{ display:flex; gap:16px; flex-wrap:wrap; margin-left:auto; }
.sitefoot a{ color:var(--muted); text-decoration:none; }
.sitefoot a:hover{ color:var(--brand); }

@media (max-width:640px){
  .doc{ padding:28px 22px; border-radius:0; border-left:none; border-right:none; }
  main{ padding:22px 0 10px; }
  h1{ font-size:27px; }
  .topbar nav{ width:100%; margin-left:0; }
  .sitefoot nav{ margin-left:0; }
}