/* legal.css — shared styling for the static document pages (privacy, terms,
   refunds, contact, faq, about).

   These pages live outside the React bundle deliberately: they must be
   readable by a crawler, an AI answer engine and a payment-gateway reviewer
   without executing any JavaScript, and they must keep working even if the app
   bundle fails. That means one small stylesheet shared between them rather
   than six copies of the same inline <style> block.

   Colours mirror the app's tokens (see index.html and tailwind.config.ts) so a
   visitor moving between the product and the policies doesn't feel handed off
   to a different company. */

:root {
  color-scheme: light dark;

  --page: #f9f7f2;
  --ink: #1a1a1a;
  --body: #333333;
  --muted: #6b6558;
  --brand: #a9822f;
  --rule: #e5e2da;
  --sunken: #f2efe7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #13110c;
    --ink: #f0ede4;
    --body: #cfcac0;
    --muted: #9a9383;
    /* Lifted from the light-mode gold: the darker tone fails contrast on a
       near-black background. */
    --brand: #dcbf82;
    --rule: #2a2721;
    --sunken: #1b1813;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
  max-width: 48rem;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  background: var(--page);
  -webkit-text-size-adjust: 100%;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span {
  color: var(--brand);
}

.masthead nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.masthead nav a {
  color: var(--muted);
  text-decoration: none;
}
.masthead nav a:hover {
  color: var(--brand);
}

/* ── Typography ───────────────────────────────────────────────────────── */

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 {
  font-size: 1.15rem;
  margin: 2.4rem 0 0.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: 1.5rem;
}
h3 {
  font-size: 1rem;
  margin: 1.4rem 0 0.4rem;
  color: var(--ink);
}

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

ul,
ol {
  padding-left: 1.25rem;
}
li {
  margin: 0.3rem 0;
}

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

strong {
  color: var(--ink);
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.lede {
  font-size: 1.02rem;
}

/* Set-off block for the things a reader must not skim past. */
.note {
  border-left: 3px solid var(--brand);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 1.25rem 0;
  color: var(--muted);
}

/* Contents list at the top of the longer documents. */
.toc {
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1rem 1rem 2.1rem;
  margin: 1.75rem 0 2.5rem;
  font-size: 0.94rem;
}
.toc li {
  margin: 0.25rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.93rem;
  display: block;
  overflow-x: auto;
}
th,
td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-weight: 600;
  color: var(--ink);
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}
footer a {
  color: var(--muted);
}
footer nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}