/* Shared skin for the portal's two standing documents, privacy.html and
   terms.html.

   ⚠️ A FILE RATHER THAN A <style> BLOCK IN EACH PAGE, and that is not a
   preference. The portal's CSP pins script-src to two sha256 hashes and
   scripts/csp_hashes.py --check gates every deploy, so a page carrying its
   own inline <script> fails the build — correctly. Inline STYLE is permitted
   (style-src carries 'unsafe-inline' for the SPA's own needs), but two copies
   of the same stylesheet in two files is how they drift, and a legal page
   that stops matching the product it belongs to reads as somebody else's.

   The palette and typefaces are lifted from index.html deliberately: these
   pages are the product speaking, and a carrier reviewer clicking through
   from a text message should land somewhere that looks like where the
   message came from. */

:root {
  --void: #262015;
  --surface: #372d1f;
  --line: #5a4930;
  --ink: #faf4e6;
  --ink-mid: #dccfb2;
  --brass: #d4af6e;
  --brass-hi: #f0d190;
  --disp: "Cormorant Garamond", Georgia, serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Light is the DEFAULT here, unlike the app.

   These pages are read once, in daylight, often from a phone, and frequently
   by somebody checking whether a business is real. The app earns its dark
   ground by being lived in; a legal document does not. */
:root {
  --paper: #fbf7ee;
  --paper-2: #f4eddd;
  --text: #2b2417;
  --text-mid: #6b5c42;
  --rule: #ded2ba;
  --link: #8a6a2c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--void);
    --paper-2: var(--surface);
    --text: var(--ink);
    --text-mid: var(--ink-mid);
    --rule: var(--line);
    --link: var(--brass-hi);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.65 var(--body);
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

header.mast {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.4rem;
  margin-bottom: 2.2rem;
}

.eyebrow {
  font: 600 11px/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: .7rem;
}

h1 {
  font: 500 2.5rem/1.1 var(--disp);
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

.meta {
  font: 400 .82rem/1.5 var(--body);
  color: var(--text-mid);
}

h2 {
  font: 600 1.02rem/1.4 var(--body);
  margin: 2.4rem 0 .6rem;
  letter-spacing: .005em;
}

p, li { margin: 0 0 .85rem; }
ul { padding-left: 1.15rem; }
li { margin-bottom: .55rem; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

/* The one thing on these pages somebody might be hunting for. Called out
   rather than buried, because a person looking for how to stop receiving
   texts is not in the mood to read eleven sections first. */
.callout {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  margin: 1.6rem 0;
}
.callout p:last-child { margin-bottom: 0; }

footer.colo {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font: 400 .8rem/1.6 var(--body);
  color: var(--text-mid);
}
footer.colo a { color: var(--text-mid); }

@media (max-width: 30rem) {
  .wrap { padding-top: 2rem; }
  h1 { font-size: 2rem; }
}