/* Shared shell for the Privacy Policy and the Terms of Service.
 *
 * These are the two pages a Google OAuth reviewer, an app-store reviewer and
 * a cautious customer all read before they trust the product, so they use the
 * landing page's own tokens rather than a generic legal-boilerplate look.
 * Same ground, same gilt, same faces - a different room in the same building.
 *
 * The landing page commits to a single dark treatment, so these do too: no
 * prefers-color-scheme block, every colour painted explicitly. */

:root{
  --bg:#0E0B08; --bg2:#17130E; --surface:#221B13;
  --paper:#F1E4CC; --paper2:#E9D9BC;
  --ink-muted:#A6957A;
  --accent:#E0A83E; --glow:#F4C868;
  --hair:rgba(224,168,62,.18);
  --rule:rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--paper);
  font-family:'Literata',Georgia,serif; font-size:17px; line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--glow)}
a:focus-visible{outline:2px solid var(--glow); outline-offset:3px; border-radius:2px}

/* ---- masthead ---------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:18px;
  padding:14px 26px;
  background:rgba(14,11,8,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.bar .home{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--paper)}
.bar .home img{display:block; width:30px; height:30px; border-radius:7px}
.bar .home b{
  font-family:'Cinzel Decorative','Cormorant',Georgia,serif;
  font-weight:700; font-size:17px; letter-spacing:.02em; color:var(--paper);
}
.bar nav{margin-left:auto; display:flex; gap:20px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase}
.bar nav a{text-decoration:none; color:var(--ink-muted)}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--accent)}

/* ---- layout ------------------------------------------------------------ */
.wrap{max-width:1120px; margin:0 auto; padding:0 26px 90px}
.masthead{padding:64px 0 34px; border-bottom:1px solid var(--rule)}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin:0 0 16px;
}
h1{
  font-family:'Cinzel Decorative','Cormorant',Georgia,serif;
  font-weight:700; font-size:clamp(30px,5.2vw,46px); line-height:1.16;
  margin:0 0 14px; color:var(--paper); text-wrap:balance;
}
.dates{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; color:var(--ink-muted); margin:0;
}

.cols{display:grid; grid-template-columns:1fr; gap:44px; padding-top:40px}
/* Grid items default to min-width:auto, which lets the widest descendant set
   the track. The data table declares min-width:520px so its columns stay
   readable, and without this that number escapes its scroll container and
   pushes the whole page sideways on a phone. */
.cols > *{min-width:0}
@media (min-width:1000px){
  .cols{grid-template-columns:216px minmax(0,1fr); gap:56px}
  .toc{position:sticky; top:88px; align-self:start; max-height:calc(100vh - 118px); overflow:auto}
}
.toc h2{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; font-weight:400;
}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.toc a{
  display:block; font-size:13.5px; line-height:1.4; color:var(--ink-muted);
  text-decoration:none; border-left:2px solid transparent; padding-left:11px;
}
.toc a:hover{color:var(--paper); border-left-color:var(--hair)}

/* ---- the plain-language box ------------------------------------------- */
.short{
  background:var(--bg2); border:1px solid var(--hair); border-radius:12px;
  padding:26px 28px; margin:0 0 40px;
}
.short h2{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; font-weight:400;
}
.short ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.short li{font-size:15.5px; line-height:1.62; color:var(--paper2)}
.short p{margin:14px 0 0; font-size:13px; color:var(--ink-muted); font-style:italic}

/* ---- body -------------------------------------------------------------- */
section{padding-top:38px; scroll-margin-top:82px}
section h2{
  font-family:'Cormorant',Georgia,serif; font-weight:600;
  font-size:26px; line-height:1.26; margin:0 0 4px; color:var(--paper);
  text-wrap:balance;
}
section h2 .num{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent);
  letter-spacing:.1em; margin-right:11px; vertical-align:2px;
}
section h3{
  font-family:'Cormorant',Georgia,serif; font-weight:600; font-size:19px;
  margin:26px 0 2px; color:var(--paper2);
}
p{margin:13px 0; max-width:68ch}
ul,ol{margin:13px 0; padding-left:22px; max-width:66ch}
li{margin:7px 0}
strong{color:var(--paper); font-weight:500}
hr{border:0; border-top:1px solid var(--rule); margin:44px 0 0}

/* Data tables read far better than prose for "what we collect and why". */
.tbl{width:100%; max-width:100%; overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
th,td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--rule)}
th{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); font-weight:400; white-space:nowrap;
}
td{color:var(--paper2)}
td:first-child{color:var(--paper); width:30%}

/* Anything the operator still has to fill in before this is truly final.
   Deliberately loud - it must be impossible to publish by accident. */
.tbd{
  background:rgba(224,168,62,.16); border-bottom:1px dashed var(--accent);
  padding:1px 5px; border-radius:3px; color:var(--glow);
  font-family:'IBM Plex Mono',monospace; font-size:.86em;
}

.contact{
  background:var(--bg2); border:1px solid var(--hair); border-radius:12px;
  padding:22px 26px; margin-top:20px;
}
.contact p{margin:6px 0}

footer{
  margin-top:64px; padding:36px 26px 60px; text-align:center;
  color:var(--ink-muted); font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  border-top:1px solid var(--rule);
}
footer a{color:var(--ink-muted); text-decoration:none}
footer a:hover{color:var(--accent)}
footer .legal{margin-top:12px; letter-spacing:.12em; text-transform:none; font-size:11px}

@media print{
  .bar,.toc,footer{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  h1,section h2,section h3,strong,td:first-child{color:#000}
  .short,.contact{border:1px solid #bbb; background:#f6f6f6}
  a{color:#000}
  .tbd{background:#ffe9a8; color:#000}
}