/* Shared shell for the legal + support pages. Mirrors the tokens in
   index.html so these pages read as the same site, not a bolted-on annex. */
:root {
  --paper: #F3F1EF; --card: #FBFAF9; --ink: #1A1614; --muted: #6E6862;
  --faint: #9A938C; --rule: #DCD8D2; --rec: #E02B1D;
  --shadow: 0 1px 2px rgba(26,22,20,.05), 0 8px 24px -12px rgba(26,22,20,.18);
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.13rem + .34vw, 1.42rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16130F; --card: #1F1B18; --ink: #F2EFEA; --muted: #A69E96;
    --faint: #736B64; --rule: #332E2A; --rec: #FF4D3D;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper: #16130F; --card: #1F1B18; --ink: #F2EFEA; --muted: #A69E96;
  --faint: #736B64; --rule: #332E2A; --rec: #FF4D3D;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.wrap { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

header.bar {
  border-bottom: 1px solid var(--rule); padding: 1.1rem 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--step--1); letter-spacing: .04em;
  display: flex; gap: 1rem; justify-content: space-between; align-items: center;
}
header.bar a { color: var(--muted); text-decoration: none; }
header.bar a:hover { color: var(--ink); }
.brand { color: var(--ink); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.brand .dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--rec); margin-right: .45rem; vertical-align: baseline;
}

main { padding: 3rem 0 1rem; }
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--step--1);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 .7rem;
}
h1, h2, h3 {
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .012em;
  text-wrap: balance; margin: 0;
}
h1 { font-size: var(--step-2); line-height: 1.1; }
h2 {
  font-size: var(--step-1); margin: 2.6rem 0 .7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
h3 { font-size: var(--step-0); margin: 1.6rem 0 .4rem; text-transform: none; letter-spacing: 0; }
p, li { color: var(--muted); }
p { margin: 0 0 1rem; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: var(--rec); }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--faint); }

.updated {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--step--1);
  color: var(--faint); margin: .8rem 0 0;
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink); margin: 1.4rem 0 0; }

/* The one thing a reader of a privacy policy actually wants to know. */
.callout {
  background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rec);
  border-radius: 3px; padding: 1.1rem 1.3rem; margin: 1.8rem 0; box-shadow: var(--shadow);
}
.callout p:last-child { margin-bottom: 0; }
.callout p { color: var(--ink); }

table { border-collapse: collapse; width: 100%; margin: 0 0 1.2rem; font-size: var(--step--1); }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
  font-size: .74rem; white-space: nowrap;
}
td { color: var(--muted); }

.addr {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--step--1);
  line-height: 1.7; color: var(--muted); font-style: normal;
}

footer {
  border-top: 1px solid var(--rule); padding: 1.6rem 0 2.5rem; margin-top: 3rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: var(--step--1); color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
}
footer a { color: var(--faint); }