/* Inter, self-hosted. This @font-face is a deliberate duplicate of the ones in
   index.css and 404.css: the legal pages must not pull in 26KB of landing-page
   CSS just to get a font declaration, and a shared fonts.css would add a
   render-blocking request to index.html, which is the page that actually
   matters for Core Web Vitals. The font file URL is identical, so it is one
   download and one cache entry. KEEP THE THREE BLOCKS IN SYNC. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --ink: #0b0d0d;
  --ink-soft: #151918;
  --paper: #f1efe8;
  --orange: #ff6433;
  --lime: #d5ff63;
  --muted: #9da39e;
  --line-dark: rgba(241, 239, 232, .16);
  --max: 1240px;
  --pad: clamp(20px, 4vw, 58px);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  /* clip rather than hidden, matching index.css: hidden turns body into a
     scroll container and breaks position:sticky — which the table of contents
     and the topbar both rely on. */
  overflow-x: clip;
}

a { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
#main:focus { outline: none; }

/* Deep-linked sections (/privacy/#your-rights) would otherwise land under the
   sticky topbar. */
[id] { scroll-margin-top: 88px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--lime);
  color: var(--ink);
  padding: 10px 14px;
  font: 700 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.skip-link:focus { transform: translateY(0); }

.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000 0 34%, transparent 72%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 68px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(11, 13, 13, .9);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Hit area is only 13px tall on its own; the 68px topbar centers items so
     this is visually identical. Matches index.css and 404.css. */
  min-height: 44px;
  gap: 11px;
  width: max-content;
  text-decoration: none;
  font: 800 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-copy { display: grid; gap: 5px; }

.brand-mark {
  width: 13px;
  height: 13px;
  border: 2px solid var(--orange);
  box-shadow: inset 4px 0 0 var(--orange);
  transform: rotate(45deg);
}

.header-status {
  color: var(--muted);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.header-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 100, 51, .12);
  vertical-align: 1px;
}

main {
  width: min(100%, var(--max));
  margin: 0 auto;
  border-left: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}

/* ---------------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------------- */

.legal-head {
  padding: clamp(56px, 7vw, 96px) var(--pad) clamp(36px, 4vw, 54px);
  border-bottom: 1px solid var(--line-dark);
  background: linear-gradient(135deg, rgba(255, 100, 51, .05), transparent 52%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--orange);
  font: 800 11px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

h1, h2, h3, p, ul, ol { margin-top: 0; }

h1 {
  max-width: 16ch;
  margin-bottom: 26px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 750;
}

.legal-intro {
  max-width: 68ch;
  margin-bottom: 30px;
  color: #c7cbc6;
  font-size: clamp(16px, 1.2vw, 19px);
}

.legal-intro:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   Body layout: sticky contents rail + prose column
   --------------------------------------------------------------------------- */

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 68px;
  /* Long policies overflow the viewport; give the rail its own scroll rather
     than letting it push the page. */
  max-height: calc(100svh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(241, 239, 232, .22) transparent;
  padding: clamp(36px, 4vw, 52px) 26px clamp(36px, 4vw, 52px) var(--pad);
  border-right: 1px solid var(--line-dark);
}

.legal-toc h2 {
  margin-bottom: 18px;
  color: var(--muted);
  font: 600 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc li { counter-increment: toc; }

.legal-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  color: #b9beb9;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  color: var(--muted);
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .04em;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body {
  min-width: 0;
  padding: clamp(36px, 4vw, 52px) var(--pad) clamp(64px, 7vw, 96px);
}

.legal-body section { counter-increment: legal-section; }
.legal-body { counter-reset: legal-section; }

.legal-body section + section {
  margin-top: 48px;
  padding-top: 44px;
  border-top: 1px solid var(--line-dark);
}

.legal-body h2 {
  max-width: 40ch;
  margin-bottom: 20px;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}

/* The section number lives in CSS so the heading text stays clean for screen
   readers, search snippets, and anyone quoting a section by name. */
.legal-body h2::before {
  content: counter(legal-section, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--orange);
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
}

.legal-body h3 {
  max-width: 46ch;
  margin: 34px 0 12px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  max-width: 72ch;
  margin-bottom: 18px;
  color: #ccd0cb;
}

.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--orange); }

.legal-body a {
  color: var(--paper);
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-body a:hover, .legal-body a:focus-visible { color: var(--orange); }

.legal-body strong { color: var(--paper); font-weight: 700; }

/* Email addresses and other literal values. */
code {
  padding: 2px 6px;
  border: 1px solid var(--line-dark);
  background: var(--ink-soft);
  color: var(--paper);
  font: 500 .88em/1.4 var(--mono);
  word-break: break-word;
}

/* All-caps disclaimer and liability blocks. Set in a panel so the shouting
   reads as a legal convention rather than as the page yelling at the reader,
   and stepped down a size because uppercase runs wide. */
.legal-caps {
  max-width: 76ch;
  padding: 20px 22px;
  border-left: 2px solid var(--orange);
  background: rgba(21, 25, 24, .7);
  font-size: 14px;
  letter-spacing: .01em;
}

.legal-caps p:last-child,
.legal-caps ul:last-child,
.legal-caps ol:last-child { margin-bottom: 0; }

/* Contact block at the end of each document. */
.legal-contact {
  max-width: 76ch;
  padding: 22px 24px;
  border: 1px solid var(--line-dark);
  background: rgba(21, 25, 24, .6);
}

.legal-contact p:last-child { margin-bottom: 0; }

.legal-contact .legal-contact-name {
  margin-bottom: 6px;
  font: 800 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
}

.legal-outro { margin-top: 24px; }

/* Cross-document pointer, e.g. Privacy Policy -> Website Terms. Scoped under
   .legal-body a so it outranks the prose link colour above — a bare
   .legal-crosslink loses to `.legal-body a` on specificity and paints the label
   paper-on-paper, i.e. an empty white box. */
.legal-body a.legal-crosslink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font: 800 10px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.legal-body a.legal-crosslink:hover,
.legal-body a.legal-crosslink:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Footer — matches index.css and 404.css
   --------------------------------------------------------------------------- */

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
  padding: 38px var(--pad);
  border-top: 1px solid var(--line-dark);
  color: #838984;
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

footer .center { text-align: center; }
footer .right { text-align: right; }

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.footer-nav a {
  /* 23px tall before — one pixel under the 24x24 minimum target size. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 0;
  text-decoration-color: rgba(131,137,132,.5);
  text-underline-offset: 3px;
}
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--paper); }

.footer-nav a[aria-current="page"] { color: var(--paper); }

@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 1fr; }

  /* Collapse the rail into a plain block above the text. Sticky positioning on
     a full-width box would cover the content it links to. */
  .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: clamp(30px, 5vw, 40px) var(--pad);
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 24px;
  }
}

@media (max-width: 680px) {
  .topbar { min-height: 60px; padding: 0 18px; }
  .header-status { font-size: 9px; }
  [id] { scroll-margin-top: 76px; }
  h1 { font-size: clamp(38px, 11vw, 56px); }
  .legal-body h2 { font-size: 21px; }
  .legal-caps { padding: 16px 18px; font-size: 13px; }
  .legal-crosslink { width: 100%; justify-content: space-between; }
  footer { grid-template-columns: 1fr; padding: 28px 20px; text-align: left; }
  footer .center, footer .right { text-align: left; }
  .footer-nav { justify-content: flex-start; gap: 4px 18px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .brand-mark { border: 1px solid CanvasText; }
  .legal-contact, code { border: 1px solid CanvasText; }
  .legal-caps { border-left: 2px solid CanvasText; }
  .legal-crosslink { border: 1px solid CanvasText; }
}