/* Terms of Service and Privacy Policy, set for reading, in the same look as the app:
   Gold, Graphite or Daylight (theme.js sets [data-theme] on <html> from Settings). */

@font-face {
  font-family: "Gloock";
  src: url("fonts/Gloock-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* The same tokens as styles.css, trimmed to what these pages use. */
:root,
[data-theme="gold"] {
  --bg: #11100e;
  --panel: #1a1815;
  --line: rgba(255, 236, 200, .09);
  --line-strong: rgba(255, 236, 200, .2);
  --text: #f7f1e5;
  --text-2: #d5ccba;
  --text-3: #a39a8b;
  --brand-text: #e3c37e;
  --focus: #e3c37e;
  --mark-1: #7d6127;
  --mark-2: #a8843a;
  --mark-3: #cfa95a;
  --mark-4: #ecd08f;
  --mark-x: #f7f1e5;
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --glow: radial-gradient(1100px 560px at 50% -16%, rgba(214, 170, 82, .12), transparent 70%);
  color-scheme: dark;
}
[data-theme="graphite"] {
  --bg: #0d0d0f;
  --panel: #151518;
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .17);
  --text: #f5f5f7;
  --text-2: #c6c6ce;
  --text-3: #92929e;
  --brand-text: #b2a1ff;
  --focus: #b2a1ff;
  --mark-1: #4b34b8;
  --mark-2: #6447e6;
  --mark-3: #8a72ff;
  --mark-4: #b6a6ff;
  --mark-x: #f5f5f7;
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --glow: radial-gradient(900px 520px at 12% -20%, rgba(124, 92, 255, .16), transparent 70%);
  color-scheme: dark;
}
[data-theme="daylight"] {
  --bg: #f3f4f7;
  --panel: #ffffff;
  --line: rgba(17, 22, 34, .1);
  --line-strong: rgba(17, 22, 34, .2);
  --text: #121419;
  --text-2: #3d4350;
  --text-3: #5f6673;
  --brand-text: #c2410c;
  --focus: #e8590c;
  --mark-1: #121419;
  --mark-2: #121419;
  --mark-3: #121419;
  --mark-4: #121419;
  --mark-x: #e8590c;
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --glow: none;
  color-scheme: light;
}
:root {
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--glow);
  background-repeat: no-repeat;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.legal {
  max-width: 72ch;
  margin: 0 auto;
  padding: 40px 16px 72px;
}

.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
}
.wordmark svg { flex: none; }
.fm-t:nth-of-type(1) { fill: var(--mark-3); }
.fm-t:nth-of-type(2) { fill: var(--mark-4); }
.fm-w { fill: var(--mark-2); }
.fm-g { fill: var(--mark-x); }
.back {
  color: var(--text-2);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.back:hover { color: var(--text); }

h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(36px, 7vw, 52px);
  font-weight: 700;
  line-height: 1.05;
}
.effective { margin: 0 0 32px; color: var(--text-3); font-size: 14px; }

h2 {
  margin: 44px 0 10px;
  color: var(--text);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
h3 { margin: 24px 0 6px; color: var(--text); font-size: 16px; font-weight: 600; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
strong { color: var(--text); font-weight: 600; }

a { color: var(--brand-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* The short version at the top: the few things most people want to know. */
.summary {
  margin: 0 0 8px;
  padding: 20px 22px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.summary h2 { margin-top: 0; font-size: 22px; }

/* Plain capitals are how courts expect warranty disclaimers to stand out. */
.caps { color: var(--text); font-size: 14px; letter-spacing: .01em; }

.legal-foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 14px;
}