/* Page frame for privacy.html and terms.html. Tokens repeat the values in index.html (checked by checks/check_legal.py facts). */
:root{
  --wall:#050505; --soot:#181513; --line:#2B2622; --line-2:#5A4F47; --bone:#F4EEE4; --ash:#A0978B; --text-2:#D3CABF;
  --neon:#FF3D3D; --neon-ink:#170404; --tungsten:#FFB46B; --chip-bg:rgba(20,17,15,.7); --chip-line:#3A332E; --on-bone:#0C0A09;
  --foot:#0B0A09; --foot-line:#1F1B18; --bk-note-bg:#2A1D10; --bk-note-ink:#FFE2C2;
  --display:'Unbounded',system-ui,sans-serif; --body:'Onest',system-ui,sans-serif;
  --gutter:clamp(20px,4vw,64px);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --wall:#F2F0ED; --soot:#FFFFFF; --line:#DDD7D0; --line-2:#A89F95; --bone:#17120F; --ash:#5C544C; --text-2:#3A332E;
  --neon:#C81E27; --neon-ink:#FFFFFF; --tungsten:#854109; --chip-bg:rgba(255,255,255,.8); --chip-line:#D6CFC7; --on-bone:#FFFFFF;
  --foot:#E9E5E0; --foot-line:#D6CFC7; --bk-note-bg:#FFF1DF; --bk-note-ink:#6B3A07;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--wall); scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--wall); color:var(--bone); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--tungsten); outline-offset:3px}
.wm-light{display:none}
:root[data-theme="light"] .wm-dark{display:none}
:root[data-theme="light"] .wm-light{display:block}

.lp-wrap{width:100%; max-width:980px; margin-inline:auto; padding-inline:var(--gutter)}
.lp-top{border-bottom:1px solid var(--line)}
.lp-bar{min-height:76px; display:flex; align-items:center; gap:12px 16px; padding-block:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; margin-right:auto}
.brand img{width:40px; height:40px}
.brand .wm{width:112px; height:auto}
.lang{display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--chip-bg); box-shadow:0 0 0 1px var(--line) inset; flex-shrink:0}
.lang button{min-width:40px; height:32px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:var(--ash); font:600 13px/1 var(--body); letter-spacing:.04em; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--bone); color:var(--on-bone)}
.theme-t{display:inline-flex; width:40px; height:40px; border-radius:50%; border:0; background:var(--chip-bg); box-shadow:0 0 0 1px var(--chip-line) inset; color:var(--bone); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0}
.theme-t:hover{box-shadow:0 0 0 1px var(--bone) inset}
.theme-t .i-moon{display:none}
:root[data-theme="light"] .theme-t .i-sun{display:none}
:root[data-theme="light"] .theme-t .i-moon{display:block}

.lp-main{flex:1 0 auto; padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,96px)}
.lp-back{display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; color:var(--ash); font-size:15px; text-decoration:none}
.lp-back:hover{color:var(--bone)}
.lp-h1{margin:0 0 18px; font:800 clamp(28px,5.2vw,52px)/1.08 var(--display); letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word}

.lp-foot{background:var(--foot); border-top:1px solid var(--foot-line); color:var(--ash); font-size:14px}
.lp-foot .lp-wrap{display:flex; justify-content:space-between; align-items:center; gap:10px 24px; flex-wrap:wrap; padding-block:22px 30px}
.lp-foot nav{display:flex; gap:8px 22px; flex-wrap:wrap}
.lp-foot a{color:var(--ash)}
.lp-foot a:hover{color:var(--bone)}
@media (max-width:420px){
  .brand .wm{width:92px}
  .brand img{width:36px; height:36px}
  .lp-bar{gap:10px}
}

/* 404 page (hosting) */
.lp-code{margin:0 0 6px; font:800 clamp(56px,12vw,120px)/1 var(--display); color:var(--neon); letter-spacing:-.03em}
.lp-text{margin:0 0 10px; max-width:60ch; color:var(--text-2)}
.lp-acts{margin:28px 0 0}
.lp-btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:999px; background:var(--neon); color:var(--neon-ink); font:600 16px/1.2 var(--body); text-decoration:none; text-align:center}
.lp-btn:hover{filter:brightness(1.08)}