/* ==================================================================
   The legal pages, on the same ground as the site.

   THEY SHIPPED IN LIGHT MODE. Each of the four carried its own inline
   <style> with `color-scheme: light`, `--canvas:#fff`, `--ink:#1C1C1C`
   and `ui-sans-serif`, so clicking PRIVACY from a #0C0B0A landing page
   threw the reader into a white system-font document. On the App Store
   review surface that is the first thing a reviewer sees after the
   marketing page, and it reads as a different company's website.

   ONE FILE, FOUR PAGES. The inline blocks are gone. Four copies of a
   stylesheet is four places for a value to drift, which is the exact
   defect `scripts/check-css-layers.mjs` exists to fail the build over
   in one.css. The same rule applies here even though nothing checks it.

   THE SYSTEM, from BRAND-SYSTEM-2026-08-19 and BRAND-AUDIT-2026-08-21:
   void #0C0B0A, ink #F4F1EC, and the ink ramp is 100 / 72 / 58. No
   brand hue, ever — sage and dust are price movement and there is no
   price on these pages, so there is no colour on these pages.
   ================================================================== */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('/fonts/syne-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #0c0b0a;
  --ink: #f4f1ec;
  /* The ramp. 72% is body, 58% is the floor and only above 18.66px
     semibold — which is why captions here sit at 72 and not 58. */
  --ink-72: rgb(244 241 236 / 72%);
  --ink-58: rgb(244 241 236 / 58%);
  --line: rgb(244 241 236 / 12%);
  --surface: rgb(244 241 236 / 4%);
  --sans: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink-72);
  background: var(--void);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------- HEADER
   Same chrome as the live homepage: »/ CORSO left, @CorsoHQ right.
   No Support / Privacy / Terms / Delete row. The mark is a link home
   because these pages are a detour; the homepage mark is a span.

   The mark is the same »/ glyph the landing header uses, set in mono
   beside Syne. Not <CorsoMark />: at this size the SVG's optical weight
   does not match Syne 700 and the mono guillemets do. Same decision as
   CorsoShell and CorsoLandingPage — three surfaces, one answer.

   line-height 1 because the glyph is larger than the word beside it and
   its line box would otherwise set the header's height. Same trap that
   pushed five viewports past the fold on the landing page. */
header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vh, 30px) clamp(20px, 5vw, 56px);
}
header .mark {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--ink);
  font-family: 'Syne', var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-decoration: none;
}
header .mark .glyph {
  opacity: 0.74;
  line-height: 1;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.06em;
}
header .x {
  color: var(--ink-58);
  font-size: 11px;
  line-height: 1;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-decoration: none;
}
header .x:hover,
header .x:focus-visible {
  color: rgb(244 241 236 / 92%);
}

/* --------------------------------------------------------- BODY */
main {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) clamp(20px, 5vw, 56px) 96px;
}

h1 {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
h2 {
  margin: 44px 0 12px;
  color: var(--ink);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}
h3 {
  margin: 28px 0 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}

p,
li {
  color: var(--ink-72);
  font-size: 16px;
}
p {
  margin: 14px 0;
}
ul,
ol {
  padding-left: 22px;
}
li {
  margin: 7px 0;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(244 241 236 / 34%);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--ink);
}

/* Addresses, entity names and the mint-like strings the policies quote.
   Mono because they are values to be copied exactly, not prose. */
code {
  padding: 0.12em 0.4em;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86em;
}

/* The consequence callouts. These carry the sentences a reader most
   needs to not skim — the wallet-access warning in the privacy policy
   is one — so they get the ink and a rule rather than a tint. */
blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 2px solid rgb(244 241 236 / 34%);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  color: var(--ink);
}
blockquote p {
  margin: 6px 0;
}

hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 15px;
}
th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Same chrome as the homepage: holdco left; Privacy, Terms, mail
   right. Support and Delete sit as quiet extras so those pages stay
   one hop away after the lawyer-template nav is gone. */
footer {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: clamp(16px, 2.5vh, 28px) clamp(20px, 5vw, 56px);
  color: var(--ink-58);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
footer .foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
footer a {
  color: var(--ink-58);
  text-decoration: none;
}
footer a:hover {
  color: rgb(244 241 236 / 88%);
}
footer .foot-mail {
  text-transform: none;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-color 140ms ease;
  }
}