/* ============================================================
   CALLED IT — static site styles
   Shared by the public marketing/legal pages (about, terms,
   privacy). These pages are plain static HTML served straight
   from /public — they never boot the React app — so the brand
   tokens live here as a small self-contained copy of theme.js.
   Light/dark follows the OS (prefers-color-scheme); the app's
   own toggle doesn't reach these pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;700&display=swap');

:root {
  --paper: #F2F4FA;
  --card: #FFFFFF;
  --ink: #141A2E;
  --muted: #67708A;
  --line: #E3E7F0;
  --gold: #E89B0C;
  --goldSoft: #FCF1DB;
  --yes: #0FA678;
  --no: #6C55E0;
  --soft: #F5F7FC;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12151F;
    --card: #1B2130;
    --ink: #EDEFF7;
    --muted: #96A0BC;
    --line: #2B3247;
    --gold: #F0A82A;
    --goldSoft: #3A2D10;
    --yes: #1FBF8F;
    --no: #9B87F5;
    --soft: #20273A;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 22px; }

/* --- top bar: wordmark returns you to the app --- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
}
.brand img { width: 26px; height: 26px; border-radius: 6px; display: block; }
.nav a {
  color: var(--muted); text-decoration: none; font-weight: 600;
  font-size: 14px; margin-left: 18px;
}
.nav a:hover { color: var(--ink); }
.nav a.cta { color: var(--gold); }

/* --- content --- */
main { padding: 40px 0 8px; }

h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-size: 38px; margin: 0 0 8px;
}
h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 22px; margin: 34px 0 10px;
}
h3 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
p, li { color: var(--ink); }
a { color: var(--no); text-decoration: underline; text-underline-offset: 2px; }
.lede { font-size: 20px; color: var(--muted); margin: 0 0 8px; line-height: 1.55; }
.eyebrow {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.updated {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12.5px; color: var(--muted); margin: 0 0 26px;
}
ul { padding-left: 20px; }
li { margin: 5px 0; }
hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* pill button (About hero) */
.btn {
  display: inline-block; margin-top: 8px;
  background: var(--ink); color: var(--paper);
  text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 13px 26px; border-radius: 999px;
}
.btn:hover { opacity: 0.92; }

/* how-it-works steps */
.steps { display: grid; gap: 14px; margin: 22px 0 4px; }
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px;
}
.step .n {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-weight: 700; color: var(--gold); font-size: 13px;
}
.step h3 { margin: 4px 0 2px; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* --- footer risk disclosure --- */
.risk {
  border-top: 1px solid var(--line); margin-top: 44px;
  background: var(--soft);
}
.risk .wrap { padding-top: 26px; padding-bottom: 34px; }
.risk p {
  font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 10px;
}
.risk .links a {
  color: var(--muted); text-decoration: none; font-weight: 600;
  font-size: 13px; margin-right: 16px;
}
.risk .links a:hover { color: var(--ink); }

/* --- phones ---------------------------------------------------------
   These pages are read almost entirely on a phone (they open from the
   in-app footer and from shared links). Below ~560px the desktop type
   scale is too big and the topbar's full nav row overflows past the
   right edge, so tighten the scale and collapse the secondary nav to
   just the "Open app" CTA — every page link still lives in the footer. */
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .topbar .wrap { height: 54px; }
  .brand { font-size: 17px; }
  .brand img { width: 24px; height: 24px; }
  .nav a { margin-left: 14px; }
  .nav a:not(.cta) { display: none; }

  main { padding: 30px 0 8px; }
  body { font-size: 16px; }
  h1 { font-size: 29px; }
  h2 { font-size: 20px; margin-top: 28px; }
  .lede { font-size: 17.5px; }
  .btn { display: block; text-align: center; }
  .risk .links { display: flex; flex-wrap: wrap; row-gap: 6px; }
  .risk .links a { margin-right: 14px; }
}