/* O×O static content pages — shared styles.
   Standalone (no Ionic / Angular). Kept small and self-contained.

   The token names are local but the values are Phase 1's, so these pages and
   the app cannot drift apart. Dark mode follows the OS: there is no app running
   here to read the saved theme, so prefers-color-scheme is the only signal
   available. */

:root {
  color-scheme: light dark;

  /* Named by role, not by shade. One token doing both jobs is what broke
     first: as a fill it has to be dark enough for white text, as link ink it
     has to be light enough for a dark page, and those move in opposite
     directions between themes — the CTA came out at 2.61 in dark. */
  --brand: #6c63ff;   /* a fill with no text on it */
  --fill: #5f57e0;    /* a brand fill that carries white text — 5.35 */
  --fill-hover: #4f47c4;
  --link: #5f57e0;    /* brand text on the page ground — 5.35 on white */
  --ink: #1b1b23;
  --muted: #656b7a;
  --bg: #ffffff;
  --bg-soft: #f4f5fa;
  --border: #e2e4ee;
  --on-fill: #ffffff;
  --on-fill-soft: #eef0ff; /* the nav links — 4.72 on --fill */
  --max: 760px;
}

/* These pages are indexed and shared, so they are read on whatever the reader's
   device is set to. Light-only meant a full-white glare in a dark browser.
   Values are the app's dark palette: 16.29 for body ink, 6.95 for muted and
   6.97 for headings and links on the page ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f7;
    --muted: #9aa0b0;
    --bg: #15151b;
    --bg-soft: #1e1e27;
    --border: #33333f;
    /* Link ink goes lighter — #5f57e0 is 2.4 on this ground — while the fills
       go deeper, so white still clears on them: 6.93 and 5.35. */
    --link: #9a94ff;
    --fill: #4f47c4;
    --fill-hover: #5f57e0;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

/* The bar was --brand, which put white at 4.32 and the nav links at 3.81 —
   under AA for both, on the pages search traffic lands on first. The shade
   takes them to 5.35 and 4.72. */
.site-header {
  background: var(--fill);
  color: var(--on-fill);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}

.site-header a.brand {
  color: var(--on-fill);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}

.site-nav {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.site-nav a {
  color: var(--on-fill-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { text-decoration: underline; }

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 20px 64px;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 8px 0 6px;
}

h2 {
  font-size: 1.35rem;
  margin: 34px 0 8px;
  color: var(--link);
}

h3 { font-size: 1.1rem; margin: 22px 0 6px; }

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 8px;
}

p, li { font-size: 1.02rem; }

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

ul, ol { padding-inline-start: 22px; }

li { margin: 6px 0; }

figure { margin: 20px 0; text-align: center; }

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 8px;
}

.callout {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 22px 0;
}

.faq q { display: block; font-weight: 600; color: var(--ink); }

/* Same 4.32 problem as the header: a 16px 600-weight label needs 4.5. */
.cta {
  display: inline-block;
  margin-top: 10px;
  background: var(--fill);
  color: var(--on-fill);
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
}

.cta:hover { background: var(--fill-hover); }

.related {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.related a { color: var(--link); }

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px 20px 48px;
}

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

/* RTL: pages set dir="rtl" on <html>; logical properties above handle most flips. */
[dir="rtl"] .callout { border-inline-start: 4px solid var(--brand); }