/* Mana legal site — one stylesheet for every page.
   Colours are the product's own tokens (frontend/packages/tokens/theme.json),
   so the pages a reviewer opens look like the app they belong to. */
:root {
  color-scheme: light dark;
  --ink:#211C15; --soft:#4A4034; --muted:#6E675A;
  --bg:#F4F0E8; --card:#FFFFFF; --line:#E6DFD1;
  --agave:#0F7A54; --agave-soft:#E0EFE7; --agave-ink:#073C28;
  /* Text that sits ON the agave fill. It has to flip with the theme: in dark
     mode --agave is a light mint, and white on it measures 1.85:1. */
  --on-agave:#FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#F6F2EA; --soft:#C9C0AF; --muted:#9A9080;
    --bg:#1C1813; --card:#2B251D; --line:#332C22;
    --agave:#5FD3A2; --agave-soft:#22352C; --agave-ink:#BFE8D6;
    --on-agave:#1C1813;
  }
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
main { max-width:44rem; margin:0 auto; padding:2rem 1.25rem 4rem }

/* Header: the mark, then the wordmark, then where you are. */
.top { display:flex; align-items:center; gap:.7rem; margin-bottom:2.5rem }
.top img { width:38px; height:38px; border-radius:10px; display:block }
.top a { color:var(--ink); text-decoration:none; font-weight:650; font-size:1.05rem }

h1 { font-size:1.95rem; line-height:1.18; letter-spacing:-.022em; margin:0 0 .3rem }
h2 { font-size:1.14rem; line-height:1.3; margin:2.3rem 0 .55rem; color:var(--agave) }
h3 { font-size:1rem; margin:1.5rem 0 .3rem; color:var(--ink) }
p, li { color:var(--soft) }
li { margin:.25rem 0 }
.meta { color:var(--muted); font-size:.9rem; margin:0 0 2rem }
a { color:var(--agave) }

.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:1rem 1.25rem; margin:1.25rem 0;
}
.card.accent { background:var(--agave-soft); border-color:transparent }
.card.accent p, .card.accent strong, .card.accent li { color:var(--agave-ink) }
.card > :first-child { margin-top:0 }
.card > :last-child { margin-bottom:0 }

/* Wide tables must scroll inside themselves, never the page. */
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch }
table { width:100%; border-collapse:collapse; margin:.75rem 0; min-width:22rem }
th, td { text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.94rem }
th { color:var(--ink); font-weight:600 }
td { color:var(--soft) }

/* Steps, for the "how to delete your account" instructions. */
ol.steps { counter-reset:s; list-style:none; padding:0; margin:1rem 0 }
ol.steps li {
  counter-increment:s; position:relative; padding-left:2.4rem; margin:.75rem 0;
}
ol.steps li::before {
  content:counter(s); position:absolute; left:0; top:.05rem;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--agave); color:var(--on-agave); font-size:.85rem; font-weight:650;
  display:flex; align-items:center; justify-content:center;
}

.nav { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 }
.nav a {
  display:inline-block; padding:.5rem .95rem; border-radius:99px;
  background:var(--card); border:1px solid var(--line);
  text-decoration:none; font-size:.93rem; font-weight:550;
}
.en { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line) }
footer {
  margin-top:3.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.89rem;
}
footer a { color:var(--muted) }