/* ============================================================
   ScaleGram CRM — legal pages (privacy, terms)
   Same dark theme as index.html, trimmed to what a text page needs.
   ============================================================ */

:root{
  --ink:#090D1E;
  --surf:#10152B;
  --bone:#EEF1FA;
  --bone-2:#C4CBE6;
  --mute:#8790B4;
  --line:rgba(238,241,250,.10);
  --line-2:rgba(238,241,250,.18);
  --acc:#6A5CFF;
  --acc-2:#93A4FF;
  --grad:linear-gradient(90deg,#3D6CF5,#8B4BE8);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --max:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#090D1E;scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--acc-2);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:6px}

.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

/* --- Header --- */
.nav{position:sticky;top:0;z-index:40;background:rgba(9,13,30,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;max-width:1240px}
.brand{display:flex;align-items:center}
.brand svg{height:36px;width:auto;display:block}
/* Language picker — same component as the home page (assets/js/lang-picker.js). */
.sg-lang{position:relative;display:inline-flex}
.sg-lang-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;font-size:13px;color:var(--bone-2);transition:color .16s,border-color .16s,background .16s}
.sg-lang-btn:hover{color:var(--bone);border-color:rgba(238,241,250,.30)}
.sg-lang-current{display:inline-flex;align-items:center;gap:8px}
.sg-lang-btn .chev{width:13px;height:13px;transition:transform .18s}
.sg-lang.open .sg-lang-btn .chev{transform:rotate(180deg)}
.sg-flag{width:20px;height:14px;border-radius:3px;display:block;flex:none;box-shadow:0 0 0 1px rgba(9,13,30,.35) inset}
.sg-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;background:#171D38;border:1px solid var(--line-2);border-radius:12px;padding:5px;box-shadow:0 18px 44px rgba(3,6,18,.55);z-index:60;display:none}
.sg-lang.open .sg-lang-menu{display:block}
.sg-lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--bone-2);text-align:left;transition:background .14s,color .14s}
.sg-lang-menu button:hover{background:rgba(238,241,250,.07);color:var(--bone)}
.sg-lang-menu button.on{color:var(--bone)}
.sg-lang-menu button .tick{margin-left:auto;width:15px;height:15px;opacity:0;flex:none}
.sg-lang-menu button.on .tick{opacity:1}

/* --- Document --- */
main{padding:64px 0 88px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
h1{font-family:var(--display);font-weight:650;letter-spacing:-.03em;line-height:1.05;font-size:clamp(34px,5vw,52px);margin:18px 0 10px}
.updated{color:var(--mute);font-size:14px;margin-bottom:38px}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:22px;line-height:1.2;margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
h2:first-of-type{border-top:0;padding-top:0}
p{color:var(--bone-2);margin-bottom:14px}
strong{color:var(--bone);font-weight:600}
ul{margin:0 0 16px 0;padding:0;list-style:none}
li{color:var(--bone-2);position:relative;padding-left:22px;margin-bottom:9px}
li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* Only the active language is shown. */
.legal-lang{display:none}
.legal-lang.on{display:block}

/* --- Footer --- */
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--mute);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1240px}

@media(max-width:640px){
  .wrap{width:calc(100% - 32px)}
  main{padding:44px 0 64px}
  .brand svg{height:30px}
}