/*
 * The plain pages — about, privacy — and nothing else.
 *
 * WHY THESE ARE NOT SCREENS IN THE APP. The app draws itself in the browser, so
 * what a link-preview robot or a search engine fetches from it is an empty
 * shell. These three pages exist to be read by people who have not decided to
 * trust us yet, which is exactly the audience that arrives through a shared
 * link — so they are ordinary HTML that needs no JavaScript to say anything.
 *
 * THE PALETTE IS COPIED, AND THAT IS THE COMPROMISE. `design-tokens.css` is the
 * single source of truth for the app and no component may declare a raw hex.
 * These files are outside the build — Vite copies `public/` through untouched,
 * so they cannot import it. The alternative was serving them through the app and
 * losing the whole reason they exist. So the tokens below are the app's values,
 * verbatim, and `plain-pages-match-the-brand.test.ts` reads both files and goes
 * red the moment one of them moves.
 */

:root {
  --vg-background:        #F7F4EE;
  --vg-surface:           #FFFDF8;
  --vg-surface-recessed:  #EFE9DC;
  --vg-border:            #E2DCCF;
  --vg-text-primary:      #14181C;
  --vg-text-secondary:    #3A4048;
  --vg-text-tertiary:     #6B6F76;
  --vg-accent:            #B8997B;
  --vg-accent-pressed:    #8A6F54;
  --vg-radius-standard:   14px;
  --vg-font-display: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  --vg-font-text:    -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vg-background);
  color: var(--vg-text-primary);
  font-family: var(--vg-font-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 30px 22px 90px; }
@media (min-width: 640px) { .wrap { padding: 40px 26px 110px; } }

/* ── the bar at the top: the wordmark, and the way back ───────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 46px;
}
/* THE MARK IS NOW A PICTURE. `/logo.svg` is the same file `brand/` generates, so
   it moves when the logo moves and there is no second copy to forget. An <img>
   rather than an inline <svg> on purpose: these two pages are hand-written and
   a thousand characters of path data in the middle of them is unreadable. */
.mark { display: block; line-height: 0; text-decoration: none; }
.mark img { display: block; width: 78px; height: auto; }
.mark:hover { opacity: 0.72; }
.back { font-size: 14px; color: var(--vg-text-tertiary); text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--vg-text-primary); }

/* ── type ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vg-accent); margin: 0 0 14px;
}
h1 {
  font-family: var(--vg-font-display); font-weight: 500;
  font-size: clamp(30px, 6.6vw, 42px); line-height: 1.16; letter-spacing: -0.015em;
  margin: 0 0 22px; text-wrap: balance;
}
h2 {
  font-family: var(--vg-font-display); font-weight: 500;
  font-size: clamp(19px, 4.4vw, 22px); line-height: 1.3; letter-spacing: -0.01em;
  margin: 52px 0 12px; text-wrap: balance;
}
.lead { font-size: 19px; line-height: 1.55; color: var(--vg-text-secondary); margin: 0 0 6px; }
p { margin: 15px 0; }
strong { font-weight: 600; }
a { color: var(--vg-accent-pressed); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vg-text-primary); }

ul { margin: 15px 0; padding-left: 0; list-style: none; }
li { position: relative; padding-left: 20px; margin: 11px 0; }
li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vg-accent);
}

/* A quiet card. Used for the one thing on each page somebody came to find:
   the address on about, the one-address summary on privacy. */
.card {
  background: var(--vg-surface); border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius-standard); padding: 22px 24px; margin: 30px 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.addr { font-size: 19px; font-weight: 500; }

.stamp {
  font-size: 13px; color: var(--vg-text-tertiary);
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--vg-border);
}

/* ── the footer, identical on both pages and echoed in the app ────────── */
.foot {
  margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--vg-border);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  font-size: 14px; color: var(--vg-text-tertiary);
}
.foot a { color: var(--vg-text-tertiary); text-decoration: none; }
.foot a:hover { color: var(--vg-text-primary); text-decoration: underline; }
.foot .said { flex: 1 1 100%; margin: 0; }