/* mwai public pages (mwai.africa). Design tokens from CLAUDE.md; fonts are the app's own files,
   copied in by scripts/aws-site.sh. No third-party assets: the CloudFront CSP allows only this site. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/Inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/PlusJakartaSans-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/Fraunces-600-latin.woff2") format("woff2"); }

:root {
  --ground: #F8EDE7; --ink: #201C1A; --muted: #5F5853; --rule: #E2D3C9; --panel: #FCF6F2;
  --accent: #0B5E50; --spark: #3FA88E; --on-accent: #FFFFFF;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #1C1816; --ink: #F8EDE7; --muted: #BDB3AC; --rule: #3A3330; --panel: #26211E;
    --accent: #3FA88E; --on-accent: #1C1816; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
.page { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.top { margin-bottom: 40px; }
.wordmark { position: relative; display: inline-block; font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 34px; letter-spacing: -0.03em; line-height: 1; padding-right: 2px; color: var(--ink);
  text-decoration: none; }
.wordmark svg { position: absolute; right: -0.04em; top: 0.04em; width: 0.33em; height: 0.33em; }
h1 { font: 800 clamp(34px, 8vw, 52px)/1.1 "Plus Jakarta Sans", "Inter", sans-serif; letter-spacing: -0.02em;
  margin: 0 0 16px; }
h2 { font: 800 24px/1.2 "Plus Jakarta Sans", "Inter", sans-serif; margin: 48px 0 8px; }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 16px; }
.soon { font-weight: 600; margin: 0 0 24px; }
.button { display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 600;
  text-decoration: none; padding: 14px 22px; border-radius: 999px; }
.modes { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.modes li { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.modes strong { display: block; }
.muted { color: var(--muted); }
.footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted);
  font-size: 15px; }
.footer p { margin: 4px 0; }