/* ============================================================
   Shared styling for privacy.html and terms.html
   Matches the main site's brand layer: gold on obsidian.
   ============================================================ */

:root{
  --obsidian:#0a0806; --pitch:#0f0c09; --soot:#16110d;
  --gold:#d9a94e; --gold-lite:#f4d99a; --gold-deep:#8a6321;
  --gem:#3fd6b8; --cream:#f6ecd9; --muted:#9c8d78;
  --serif:'Cinzel',Georgia,serif;
  --body:'Nunito',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--obsidian);color:var(--cream);
  line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--gold-lite);text-decoration:none;border-bottom:1px solid rgba(217,169,78,.35)}
a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.75rem clamp(1rem,4vw,2.5rem);
  background:rgba(10,8,6,.94);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 rgba(217,169,78,.25)}
.brand{display:flex;align-items:center;gap:.6rem;border:0}
.brand img{height:40px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.brand .word{height:19px}
@media(max-width:520px){.brand .word{display:none}}
.nav-links{display:flex;gap:1.4rem;align-items:center}
.nav-links a{font-family:var(--serif);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:0}
.nav-links a:hover{color:var(--gold)}
.nav-links a[aria-current]{color:var(--gold)}

/* ---------- layout ---------- */
.wrap{width:min(820px,92vw);margin-inline:auto}
header.page{padding:clamp(3rem,7vw,5rem) 0 2rem;text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(217,169,78,.08),transparent 65%)}
header.page h1{font-family:var(--serif);font-size:clamp(1.8rem,4.6vw,2.9rem);
  line-height:1.2;letter-spacing:.02em;margin-bottom:.9rem}
.updated{display:inline-block;font-family:var(--serif);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,169,78,.35);
  background:rgba(217,169,78,.07);padding:.4rem 1.05rem;border-radius:999px}

main{padding:1rem 0 clamp(3rem,7vw,6rem)}

/* ---------- table of contents ---------- */
.toc{margin:2.4rem 0 3rem;padding:1.5rem 1.7rem;border-radius:18px;
  border:1px solid rgba(217,169,78,.22);background:linear-gradient(180deg,#1a1410,#120e0a)}
.toc h2{font-family:var(--serif);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:.35rem}
.toc li{counter-increment:toc}
.toc li a{border:0;font-size:.97rem;color:#ddd0ba}
.toc li a::before{content:counter(toc) ". ";color:var(--gold-deep);font-weight:700}
.toc li a:hover{color:var(--gold-lite)}

/* ---------- content ---------- */
section{scroll-margin-top:5rem;margin-bottom:2.6rem}
h2{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.35;
  color:var(--cream);margin:0 0 .9rem;padding-bottom:.6rem;
  border-bottom:1px solid rgba(217,169,78,.18)}
h3{font-family:var(--body);font-weight:800;font-size:1.02rem;color:var(--gold-lite);
  margin:1.5rem 0 .5rem}
p{margin-bottom:1rem;color:#ddd0ba}
ul,ol{margin:0 0 1.1rem 1.3rem;color:#ddd0ba}
li{margin-bottom:.5rem}
strong{color:var(--cream)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(217,169,78,.1);padding:.1em .4em;border-radius:5px;color:var(--gold-lite)}

/* callout for the things that matter most */
.note{margin:1.4rem 0;padding:1.2rem 1.4rem;border-radius:14px;
  border:1px solid rgba(63,214,184,.3);background:rgba(63,214,184,.07)}
.note strong{color:var(--gem)}
.note p:last-child{margin-bottom:0}
.warn{border-color:rgba(255,122,46,.35);background:rgba(255,122,46,.07)}
.warn strong{color:#ff9d6e}

table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid rgba(217,169,78,.15);
  vertical-align:top;color:#ddd0ba}
th{font-family:var(--serif);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
@media(max-width:600px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{margin-bottom:1rem;border:1px solid rgba(217,169,78,.18);border-radius:12px;padding:.5rem}
  td{border:0;padding:.35rem .6rem}
  td::before{content:attr(data-label);display:block;font-family:var(--serif);font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.15rem}
}

.back{display:inline-block;margin-top:2rem;font-family:var(--serif);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;border:0}

/* ---------- footer ---------- */
footer{background:#070504;padding:2.6rem 0;border-top:1px solid rgba(217,169,78,.2);
  text-align:center}
footer .foot-links{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:1rem}
footer .foot-links a{font-family:var(--serif);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border:0}
footer .foot-links a:hover{color:var(--gold)}
footer .copy{color:#7c6e5b;font-size:.84rem}