/* Self-hosted — the same two faces the app ships. These were Google Fonts
   links, which sent every reader's IP to a processor the privacy policy did
   not name, before any consent, on the page that lists the recipients. */
@font-face {
  font-family: Newsreader;
  src: url('/static/fonts/Newsreader.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url('/static/fonts/Archivo.ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --ink: #F4F1EA;
  --ground: #14140F;
  --muted: rgba(244, 241, 234, .62);
  --rule: rgba(244, 241, 234, .14);
  --accent: #C9A227;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.65 Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem 6rem }

.mast { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 2.5rem }
.mast a { color: var(--ink); text-decoration: none }
.brand { font: 300 26px/1 Newsreader, Georgia, serif; letter-spacing: .02em }
.kicker {
  display: block; margin-top: .4rem;
  font: 500 11px/1 Archivo, sans-serif; letter-spacing: .16em;
  color: var(--muted); text-transform: uppercase;
}

h1 { font: 300 34px/1.2 Newsreader, Georgia, serif; margin: 0 0 .35rem }
h2 { font: 400 21px/1.3 Newsreader, Georgia, serif; margin: 2.5rem 0 .6rem }
.updated { color: var(--muted); font-size: 13px; margin: 0 0 2.5rem }

p, li { color: rgba(244, 241, 234, .86) }
ul { padding-left: 1.15rem }
li { margin-bottom: .45rem }
strong { color: var(--ink); font-weight: 600 }
a { color: var(--accent) }

/* The one thing a reader must not miss: the photo is not kept. */
.pull {
  border-left: 2px solid var(--accent);
  padding: .1rem 0 .1rem 1rem;
  margin: 1.5rem 0;
  font: 400 18px/1.55 Newsreader, Georgia, serif;
}

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 3.5rem; padding-top: 1.25rem;
  color: var(--muted); font-size: 13px;
}
.foot a { margin-right: 1.1rem }

/* ── The marketing page ────────────────────────────────────────────────
   Shares the legal pages' palette and type on purpose. Somebody who lands
   on /marketing from the App Store and then opens the privacy policy should
   not feel they have changed companies — and the app's own restraint is the
   product's argument, so a louder page would be arguing against it. */

.wide { max-width: 52rem }

.lede {
  font: 300 clamp(26px, 4.6vw, 40px)/1.22 Newsreader, Georgia, serif;
  margin: 0 0 1.2rem;
  letter-spacing: -.01em;
}
.sub {
  font-size: 1.0625rem; color: var(--muted);
  max-width: 34rem; margin: 0 0 3rem;
}

.steps { counter-reset: step; margin: 0 0 3.5rem; padding: 0; list-style: none }
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0 1.4rem 3.2rem;
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font: 500 11px/1 Archivo, sans-serif;
  letter-spacing: .1em; color: var(--accent);
}
.steps h3 {
  font: 500 15px/1.4 Archivo, sans-serif;
  margin: 0 0 .35rem; color: var(--ink);
}
.steps p { margin: 0; color: var(--muted); font-size: .9375rem }

.plans { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 2rem }
.plan {
  flex: 1 1 15rem; border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.25rem 1.35rem;
}
.plan.pro { border-color: rgba(201, 162, 39, .4) }
.plan h3 {
  font: 500 11px/1 Archivo, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem;
}
.plan ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .9375rem }
.plan li { margin: .3rem 0 }

.note {
  border-left: 2px solid var(--accent);
  padding: .1rem 0 .1rem 1.1rem; margin: 2.5rem 0;
  color: var(--muted); font-size: .9375rem;
}

/* ── the shop ──────────────────────────────────────────────────────────
   Added for /pricing and /account. `.plans` and `.plan` already existed for
   the marketing page; these are the three things a page that takes money
   needs and a page that only explains does not. */

.price {
  font-family: Newsreader, Georgia, serif;
  font-size: 34px; font-weight: 300;
  margin: 10px 0 2px;
}
.price .per { font-size: 14px; color: var(--muted); }

/* A real target, not a text link pretending to be one. 44px is the minimum
   Apple's own HIG asks for, and the same figure the iOS app's control lint
   enforces — a control that is only tappable on its letters is the defect
   that rule exists to catch. */
.cta {
  display: inline-block; box-sizing: border-box;
  min-height: 44px; padding: 12px 20px; margin: 12px 8px 0 0;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--ground);
  font: 500 15px Archivo, system-ui, sans-serif;
  text-decoration: none; text-align: center;
}
.cta:hover { opacity: 0.92; }
.cta.quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
}
.plan form { display: inline; }

/* The marketing page's way to the app: paid clicks land there, and a page
   that only explains leaves them nowhere to go. */
.get { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 1.6rem }
.get .cta { margin: 0 }
.get-note { color: var(--muted); font-size: 14px }