/* One stylesheet for the whole site. Same palette as the app — obsidian,
   gold, parchment — so a collector arriving from a link in Settings does not
   feel they have been handed off to somebody else. */

:root {
  --obsidian: #141210;
  --obsidian-muted: #5c554c;
  --gold: #c9a227;
  --gold-deep: #8c6d1f;
  --page: #ffffff;
  --surface: #f8f6f2;
  --border: #e8e2d7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --obsidian: #f4f1ea;
    --obsidian-muted: #a49b8d;
    --gold: #e7c86b;
    --gold-deep: #e7c86b;
    --page: #141210;
    --surface: #1c1916;
    --border: #2e2924;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--obsidian);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

header.masthead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

header.masthead a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The mark. Circular because the logo is a coin — the artwork sits inside the
   inscribed circle, so a round crop takes only the black corners off. */
.mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: block;
}

/* On white, a black tile needs an edge or it reads as a hole in the page. */
@media (prefers-color-scheme: light) {
  .mark { box-shadow: 0 0 0 1px var(--border); }
}

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.updated {
  color: var(--obsidian-muted);
  font-size: 0.85rem;
  margin: 0 0 2.25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.4rem 0 0.6rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.4rem;
}

p, li { color: var(--obsidian); }

ul { padding-left: 1.15rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--gold-deep); }

.lede {
  font-size: 1.05rem;
  color: var(--obsidian-muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.94rem;
  display: block;
  overflow-x: auto;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { font-weight: 600; }

nav.index {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0;
}

nav.index a {
  display: block;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--obsidian);
  background: var(--surface);
}

nav.index a strong { display: block; margin-bottom: 0.15rem; }
nav.index a span { color: var(--obsidian-muted); font-size: 0.9rem; }

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--obsidian-muted);
  font-size: 0.85rem;
}

footer a { color: var(--obsidian-muted); }

/* ═══════════════════════════════════════════════════ landing page

   Scoped under .landing so the legal pages keep the plain single-column
   treatment they need. Everything below is the front door only.

   Two tokens are deliberately NOT theme variables. The hero slab and the
   verdict panel are obsidian in both colour schemes, the way ObsidianPanel is
   in the app: the palette inverts for reading surfaces, and the gold mark on
   near-black is the brand itself rather than a surface. Using --page here
   would turn the hero white in light mode and lose the one image the site
   has. */
:root {
  --slab: #141210;
  --slab-soft: #2a2622;
  --slab-ink: #f4f1ea;
  --slab-muted: #a49b8d;
  --gold-light: #e7c86b;
}

.landing .wrap { max-width: 58rem; }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  background: linear-gradient(155deg, var(--slab-soft), var(--slab));
  /* A faint struck edge. In light mode the slab separates from the page on
     its own; in dark mode the page is the same near-black and without this
     the hero has no boundary at all. Gold at low alpha reads on both without
     becoming a visible line on white. */
  border: 1px solid rgba(231, 200, 107, 0.16);
  border-radius: 28px;
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  color: var(--slab-ink);
  margin-bottom: 3rem;
}

.hero .mark-lg {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.9rem;
  color: var(--slab-ink);
  text-wrap: balance;
}

.hero .tagline {
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.hero p.sub {
  color: var(--slab-muted);
  font-size: 1.06rem;
  max-width: 34rem;
  margin: 0 auto;
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

.cta a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.cta .primary { background: var(--gold-light); color: var(--slab); }
.cta .ghost { border-color: #4a443c; color: var(--slab-ink); }

.hero .availability {
  margin: 1.6rem 0 0;
  color: var(--slab-muted);
  font-size: 0.85rem;
}

/* ── numbers ──────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 3.5rem;
}

.stats div {
  background: var(--page);
  padding: 1.4rem 1rem;
  text-align: center;
}

.stats b {
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stats span {
  display: block;
  margin-top: 0.3rem;
  color: var(--obsidian-muted);
  font-size: 0.82rem;
}

/* ── feature rows ─────────────────────────────────────────────────────── */

.feature {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}

.feature .kicker {
  color: var(--gold-deep);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.feature h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.feature p {
  margin: 0 0 1rem;
  max-width: 38rem;
  color: var(--obsidian-muted);
  text-wrap: pretty;
}

.feature ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 1.75rem;
  max-width: 44rem;
}

.feature li {
  padding-left: 1.35rem;
  position: relative;
  color: var(--obsidian);
  font-size: 0.95rem;
}

/* A struck dot rather than a bullet glyph, so the marker is gold at every
   text size instead of inheriting the paragraph colour. */
.feature li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── the verdict panel ────────────────────────────────────────────────── */

.verdict {
  background: var(--slab);
  color: var(--slab-ink);
  border: 1px solid rgba(231, 200, 107, 0.16);
  border-radius: 20px;
  padding: 2rem;
  margin: 3rem 0 0;
}

.verdict h2 { margin: 0 0 0.6rem; color: var(--slab-ink); font-size: 1.2rem; }
.verdict p { color: var(--slab-muted); margin: 0 0 0.8rem; max-width: 40rem; }
.verdict p:last-child { margin-bottom: 0; }
.verdict a { color: var(--gold-light); }

/* ── price ────────────────────────────────────────────────────────────── */

.price {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 1.75rem;
  margin: 3rem 0 0;
}

.price h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.price p { color: var(--obsidian-muted); margin: 0 0 0.75rem; }
.price p:last-child { margin-bottom: 0; }

/* ── legal index, on the landing page ─────────────────────────────────── */

.landing nav.index { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.landing h2.docs-heading {
  margin: 3.5rem 0 0;
  font-size: 1.2rem;
}

@media (max-width: 34rem) {
  .hero { padding: 2.5rem 1.25rem 2.25rem; border-radius: 22px; }
  .verdict, .price { padding: 1.5rem; }
}