/* Standalone styling for /terms and /privacy. Deliberately its own file rather than a slice of
   styles.css: those pages must render with no JS and no app CSS, and the app sheet is ~340KB.
   The CSP is script-src/style-src 'self' with no 'unsafe-inline', so there is no inline <style>
   and no style="" anywhere in these pages. Tokens mirror styles.css so the pages read as the
   same product. */

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --font: "Aptos Narrow", "Aptos", "IBM Plex Sans Condensed", "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --font-display: "Oswald", "Aptos Narrow", "Segoe UI", sans-serif;
  --bg-base: #0b0b0c;
  --panel: #161618;
  --text: #ededed;
  --muted: #b9b9b9;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.22);
  --cta: #36a86a;
  --gold: #f0c64a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* Keyboard users land here first and can jump the masthead. WCAG 2.4.1. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cta);
  color: #04150c;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  z-index: 10;
}
.skip:focus { left: 0; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 22px 88px; }

header.masthead {
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
  padding: 26px 0 20px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand span { color: var(--gold); }
.brand:hover { color: #fff; }

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 3.6vw, 25px);
  margin: 42px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.01em;
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 26px 0 8px; }

.updated { color: var(--muted); font-size: 15px; margin: 0 0 6px; }
.entity { color: var(--muted); font-size: 15px; margin: 0 0 30px; }

p, li { color: var(--text); }
ul, ol { padding-left: 22px; }
li { margin: 7px 0; }
a { color: var(--gold); }
a:hover { color: #ffd970; }
strong { color: #fff; }

/* A point the reader must not skim past. */
.callout {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  background: var(--panel);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 22px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; color: #fff; }
.scroll-x { overflow-x: auto; }

footer.legal-foot {
  border-top: 1px solid var(--line);
  margin-top: 52px;
  padding-top: 20px;
  color: var(--muted);
  font-size: 15px;
}
/* Flex row rather than inline anchors with margin-right. Two reasons, both measured at 320px:
   a trailing margin on the last link of a wrapped line pushed scrollWidth to 329 against a 320
   viewport (WCAG 1.4.10 Reflow), and bare inline anchors were 79.8x20 against the 24px floor in
   WCAG 2.2 SC 2.5.8. gap replaces the margin, and the vertical padding buys the height. */
.legal-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 18px;
  margin-bottom: 6px;
}
.legal-foot .foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px 64px; }
}