/*
 * Shared by terms.html, privacy.html and help.html (index.html carries its own).
 *
 * Deliberately plain: these pages exist so the App Store listing and the app's
 * legal links resolve to something readable, and they are read on a phone far
 * more often than on a desktop.
 */

/*
 * Google Sans, the same four faces index.html declares and the same files — a
 * visitor arriving from the landing page has them cached already. Declared
 * again rather than @import-ed, because an import would make these pages wait
 * on a second stylesheet before any text appeared.
 *
 * The family stops at Bold; nothing here may ask for more than 700, or the
 * browser smears the Bold outline into a weight that does not exist.
 */
@font-face {
  font-family: "Google Sans";
  src: url("/fonts/googlesans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("/fonts/googlesans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("/fonts/googlesans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("/fonts/googlesans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Light only, to match index.html and the app's own warm paper background. The
 * wordmark art is near-black over a white keyline, so it is drawn for a light
 * ground — `color-scheme: light` also stops the browser darkening form controls
 * and scrollbars underneath it.
 */
:root {
  color-scheme: light;
  --bg: #fbf9f4;
  --surface: #ffffff;
  --ink: #1c1a17;
  --muted: #6b6560;
  --rule: #e6e1d8;
  --accent: #e2703a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 20px 96px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 720px;
  margin: 0 auto;
}

header {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--rule);
}

/*
 * Logo and wordmark on one row. The wordmark carries the name, so it owns the
 * alt text and the logo is decorative (empty alt) — otherwise a screen reader
 * announces "CapDex" twice.
 */
header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/*
 * These widths are what actually size the marks — the `width`/`height`
 * attributes on the <img> tags only reserve layout space against reflow, and
 * are overridden here.
 */
header .brand-logo {
  width: 44px;
  height: 44px;
  /* The source art is a full-bleed square app icon with no rounding of its
     own, so the corner radius has to come from here. */
  border-radius: 10px;
}

header .brand-wordmark {
  width: 116px;
  height: auto;
  display: block;
}

h1 {
  margin: 32px 0 6px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h2 {
  margin: 38px 0 10px;
  font-size: 19px;
  line-height: 1.35;
}

h3 {
  margin: 24px 0 6px;
  font-size: 16px;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

a {
  color: var(--accent);
}

.effective {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.lede {
  font-size: 17px;
  color: var(--muted);
}

.note {
  margin: 28px 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 15px;
}

footer {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}

footer a {
  margin-right: 14px;
}

/* The `.home` block that stood here styled a plain-text landing page that no
   longer exists — index.html has carried its own inline styles since it was
   rebuilt, and nothing in this sheet's three pages ever used the class. */