/* Tokens mirrored from apps/mobile/src/design/primitives.js. When the app's
   palette moves, this file moves with it — the website and the app must not
   drift into two different creams. */
:root {
  --canvas: #F7F3EB;
  --surface: #F8F6F1;
  --ink-strong: #2B2A26;
  --ink-muted: #8B8478;
  --ink-faint: #ADA79B;
  --divider: #ECE7DD;
  --sage: #7FA78A;
  --overdue: #C9634C;
  /* doneInk — the palette's sage taken down to TEXT weight. Raw --sage on the
     cream canvas measures ~2.4:1, well under the 4.5:1 body-text floor, so it
     may tint a swatch but must never carry a word. This lands near 6:1. */
  --sage-ink: #456052;

  /* Petrona stands in for licensed Recoleta; if Recoleta ever lands, this one
     line changes and nothing else does. Newsreader is the WORDMARK ONLY —
     using it for general headings reads as a font mismatch (typography.ts). */
  --font-display: 'Petrona', Georgia, serif;
  --font-brand: 'Newsreader', Georgia, serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-strong);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: 680px;
  /* 680px holds ~75 characters at 16px, the upper end of comfortable measure.
     These pages are dense legal prose; a wider column loses the line. */
  margin: 0 auto;
  padding: 48px 24px 72px;
}

/* The lockup is the real brand: the traced layered mark plus the DRAWN
   wordmark, both copied from apps/mobile/assets/brand/. The wordmark is
   custom lettering, not a typeface — setting "Tend" in any font is a
   different mark, not a substitute for this one. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.lockup img.mark { width: 34px; height: 34px; display: block; }

/* 21px cap height sits the drawn wordmark level with the 34px disc without
   out-weighing it — the same subordinate relationship the splash uses. */
.lockup img.wordmark { height: 21px; width: auto; display: block; }

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin: 28px 0 8px;
}

/* 24px against 16px body is the smallest step that still reads as a section
   BREAK rather than a bold line. At the previous 20px the page ran together
   as one undifferentiated column. */
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin: 48px 0 12px;
}

p, li { color: var(--ink-strong); }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }

a {
  color: var(--sage-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink-strong); }

.muted { color: var(--ink-muted); font-size: 14px; }

/* The lede is the hook — the one paragraph most likely to be the only one
   read. It was set in --ink-muted, making the most important sentence the
   palest thing on the page. Full ink, one size up from body. */
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-strong);
  margin-bottom: 4px;
}

/* Two-up on desktop, stacked on narrow. Gives the growth/upkeep pair actual
   form instead of two bullets in a run of bullets. */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.pair .card { margin: 0; }
.pair h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
}
.pair p { margin: 0; }
.pair .eg { color: var(--ink-muted); font-size: 14px; display: block; margin-top: 8px; }

@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
}

/* The two states this page describes are two the app actually paints, so show
   the colour rather than name it. The swatch carries the hue; the word stays
   full-contrast ink, so meaning never depends on colour alone. */
.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.swatch-burning { background: var(--overdue); }
.swatch-streak { background: var(--sage); }

nav {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0;
}

@media (max-width: 420px) {
  .page { padding: 32px 18px 56px; }
  h1 { font-size: 26px; }
}