/* Shared chrome for the legal pages (privacy.html, terms.html, ai-terms.html).

   These sit outside the flight: no engine, no film, no orb — just type on the
   same forest-black the rest of the site uses, so landing here from the footer
   does not feel like leaving the site. Tokens are copied from index.html rather
   than imported, because index.html carries its CSS inline and there is nothing
   to import from. If the palette moves there, move it here too. */

:root {
  --bg: #0A100E;
  --bg-2: #111814;
  --ink: #ECF1EE;
  --ink-soft: #93A59B;
  --ink-dim: #6C7C86;
  --accent: #E0653A;
  --line: #232E28;
  --fd: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font: 400 16px/1.7 var(--fb);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ---- masthead ---------------------------------------------------------- */

.top {
  border-bottom: 1px solid var(--line);
  margin-bottom: 54px;
  padding: 22px 0 20px;
}
.top__in {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.top__brand {
  font-family: var(--fd); font-weight: 600; font-size: .96rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.top__brand:hover { color: var(--accent); }
.top__back { font-size: .8rem; color: var(--ink-dim); text-decoration: none; }
.top__back:hover { color: var(--ink); }

/* ---- document ---------------------------------------------------------- */

h1 {
  font-family: var(--fd); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 12px;
}
.sub { color: var(--ink-dim); font-size: .86rem; margin: 0 0 8px; }
.lede { font-size: 1.02rem; color: var(--ink-soft); margin: 26px 0 0; }

h2 {
  font-family: var(--fd); font-weight: 600;
  font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink);
  margin: 52px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
h2 .n { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .5em; }

h3 {
  font-family: var(--fb); font-weight: 600; font-size: .95rem;
  color: var(--ink); margin: 30px 0 8px;
}

p { margin: 0 0 15px; }
ul { margin: 0 0 15px; padding-left: 22px; }
li { margin: 0 0 9px; }
li::marker { color: var(--line); }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

code {
  font: 600 .86em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 6px; white-space: nowrap;
}

/* A callout for the things a reader should not have to hunt for: the promise
   about mobile numbers, the one-time nature of the message, how to stop it. */
.note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 22px 0;
}
.note > :last-child { margin-bottom: 0; }
.note__h {
  font-family: var(--fd); font-weight: 600; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}

/* ---- table of contents ------------------------------------------------- */

.toc { margin: 34px 0 0; padding: 20px 22px; background: var(--bg-2);
       border: 1px solid var(--line); border-radius: 12px; }
.toc h2 {
  margin: 0 0 10px; padding: 0; border: 0;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim);
}
.toc ol { margin: 0; padding-left: 20px; font-size: .9rem; }
.toc li { margin: 0 0 5px; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--ink); border-bottom-color: transparent; }

/* ---- footer ------------------------------------------------------------ */

.foot {
  margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--ink-dim); font-size: .78rem;
}
.foot a { color: var(--ink-dim); }
.foot a:hover { color: var(--ink); border-bottom-color: transparent; }
.foot__set { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- ai-terms.html ------------------------------------------------------
   The AI Services Terms are a contract, not a page of prose: ten Parts, 42
   numbered clauses, lettered sub-paragraphs, and a handful of clauses that
   carry the whole risk allocation. The extra type here exists to make that
   structure navigable — a Part rule you can see coming, a clause number in
   the margin, and a .key treatment for the clauses that would be SHOUTED IN
   CAPITALS on paper. We set them in small caps rather than literal capitals:
   the emphasis survives, and so does the legibility. */

/* Company details under the h1 — a definition list, laid out as label/value
   rows that collapse to stacked pairs on a phone. */
.meta {
  margin: 24px 0 0; padding: 18px 20px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  font-size: .86rem;
}
.meta > div {
  display: grid; grid-template-columns: 200px 1fr; gap: 4px 18px;
  padding: 6px 0; border-top: 1px solid var(--line);
}
.meta > div:first-child { border-top: 0; padding-top: 0; }
.meta > div:last-child { padding-bottom: 0; }
.meta dt { color: var(--ink-dim); }
.meta dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .meta > div { grid-template-columns: 1fr; gap: 2px; } }

/* The plain-English summary. It is expressly not part of the Agreement, so it
   reads as a card sitting above the contract rather than as clause text. */
.summary {
  margin: 34px 0 0; padding: 22px 24px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.summary__h {
  margin: 0 0 6px; padding: 0; border: 0;
  font-family: var(--fd); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.summary__note { font-size: .82rem; color: var(--ink-dim); font-style: italic; margin: 0 0 14px; }
.summary ul { margin: 0; font-size: .93rem; }
.summary li:last-child { margin-bottom: 0; }
.summary em { color: var(--ink-dim); font-style: normal; font-size: .88em; }

/* Contents, by Part rather than by clause — 42 rows would be a wall. */
.toc__parts { list-style: none; padding-left: 0; }
.toc__parts li { display: flex; justify-content: space-between; gap: 14px; }
.toc__parts span { color: var(--line); font-variant-numeric: tabular-nums; flex: none; }

.agreement {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: 56px;
}

/* Part divider: heavier rule, the Part label picked out in accent. */
.pt {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 1.24rem;
  margin: 64px 0 8px; padding-top: 30px;
  border-top: 2px solid var(--line);
}
.pt__l {
  font-family: var(--fb); font-weight: 600; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  flex: none;
}

/* Clause heading — same weight as an h2 on the other legal pages, but without
   the rule, so a Part reads as one block of clauses. */
.cl {
  font-family: var(--fd); font-weight: 600; font-size: 1rem; line-height: 1.35;
  letter-spacing: -.01em; color: var(--ink);
  margin: 34px 0 12px; padding: 0; border: 0;
}
.cl .n { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .5em; }

/* Sub-clause number, hung in the margin where there is room for it. */
.cn {
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
  font-size: .86em; margin-right: .6em;
}
@media (min-width: 900px) {
  /* Hung in the margin, positioned against the paragraph itself — so every
     paragraph in the document is a positioning context, not just the ones
     that happen to carry a number. Relying on :has() here would leave the
     numbers absolutely positioned against the page in a browser without it. */
  .wrap p { position: relative; }
  .cn { position: absolute; margin-left: -74px; width: 62px; text-align: right; margin-right: 0; }
}

/* The clauses that would be in block capitals on paper. Small caps keeps the
   weight of the original without shouting a whole paragraph at the reader. */
.key {
  font-variant-caps: all-small-caps; letter-spacing: .04em;
  font-size: 1.02rem; color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 18px 0;
}
.key .cn { font-variant-caps: normal; color: var(--ink-dim); }
@media (min-width: 900px) { .key .cn { margin-left: -94px; } }

/* Scope notes and the closing colophon — italic asides in the source. */
.scope { color: var(--ink-dim); font-size: .88rem; font-style: italic; }

/* Lettered and numbered sub-paragraphs. */
ol.al, ol.num { margin: 0 0 15px; padding-left: 30px; }
ol.al { list-style: lower-alpha; }
ol.num { list-style: decimal; }
ol.al > li, ol.num > li { margin: 0 0 9px; padding-left: 4px; }
ol.al > li::marker, ol.num > li::marker { color: var(--ink-dim); font-size: .9em; }

/* The definitions list in clause 4 reads better without bullets. */
ul.defs { list-style: none; padding-left: 0; }
ul.defs > li { padding-left: 14px; border-left: 1px solid var(--line); }