/* legal.css — shared by licence.html and refunds.html.
   Same palette and type as index.html, but set as a document rather than a
   landing page: one narrow column, generous leading, nothing that moves.
   Someone reading this is checking a detail, not being sold to. */

:root {
  --ground:    #0E1012;
  --panel:     #16181A;
  --edge:      #2A2E33;
  --edge-soft: #1F2327;
  --ink:       #F2F4F5;
  --ink-soft:  #A9B1B7;
  --ink-faint: #7A8288;
  --live:      #FF6B1A;
  --lock:      #4DA3FF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-soft);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(720px, 100% - 44px); margin-inline: auto; }

h1, h2 {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: 34px; font-weight: 800; }
h2 {
  font-size: 17px; font-weight: 700; margin: 44px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--edge-soft);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

p { margin: 0 0 15px; }
strong { color: var(--ink); font-weight: 600; }

ul { margin: 0 0 15px; padding-left: 20px; }
li { margin-bottom: 9px; }
li::marker { color: var(--ink-faint); }

a { color: var(--lock); text-decoration-color: rgba(77,163,255,.4); }
a:hover { text-decoration-color: var(--lock); }
:focus-visible { outline: 2px solid var(--lock); outline-offset: 3px; }

/* ---- masthead ---- */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 20px; border-bottom: 1px solid var(--edge-soft);
}
.brand {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 17px; letter-spacing: .01em; text-decoration: none;
}
.brand .a { color: var(--lock); }
.brand .b { color: var(--ink); }
.back {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
}
.back:hover { color: var(--ink); }

header.doc { padding: 56px 0 8px; }
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 14px;
}
.updated {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--ink-faint); margin: 14px 0 0;
}

main { padding: 30px 0 80px; }

/* The one thing on these pages that should stop the eye: a promise the
   reader is entitled to rely on. Orange is the accent everywhere else in
   Syncopate for "this concerns you", and it means the same here. */
.callout {
  border-left: 2px solid var(--live);
  background: rgba(255,107,26,.055);
  padding: 15px 18px; margin: 22px 0; border-radius: 0 6px 6px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

footer {
  border-top: 1px solid var(--edge-soft);
  padding: 26px 0 44px;
  font-size: 13.5px; color: var(--ink-faint);
}
footer a { color: var(--ink-faint); }
footer a:hover { color: var(--ink); }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }

@media (max-width: 560px) {
  h1 { font-size: 27px; }
  body { font-size: 16px; }
}