/*
  Wallyo: shared stylesheet for the static legal pages (/privacy, /terms).

  These pages are deliberately NOT part of the React build. Legal text should
  render without JavaScript, so it stays readable if the bundle fails and
  visible to crawlers that do not execute scripts.

  Colours are the Wallyo app's Ink & Citron tokens, resolved to hex so this
  file has no dependency on Tailwind or on src/index.css. If the app palette
  changes, change it here too.
      ink    #0E1013   citron #CDF04B
*/

/* Self-hosted fonts. Mirrors the @font-face block in src/index.css. Change
   both together. Nothing here reaches an external host.
   Plus Jakarta Sans for headings, Inter for body. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0E1013;
  --paper: #F9FAFB;
  --card: #FFFFFF;
  --muted: #616975;
  --border: #DFE2E7;
  --secondary: #EDEFF2;
  --citron: #CDF04B;
  --on-ink: #F5F7F9;
  --link: #4A7C0F;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fff;
}
.site-header .brand img { height: 2.25rem; width: 2.25rem; object-fit: contain; }
.site-header .brand span { font-size: 1.25rem; font-weight: 700; }
.site-header .back {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s;
}
.site-header .back:hover { color: #fff; }

/* ---------- layout ---------- */

main { max-width: 42rem; margin: 0 auto; padding: 4rem 1.5rem; }

.page-title { font-size: clamp(2.25rem, 6vw, 3rem); font-weight: 700; line-height: 1.08; margin: 0 0 0.75rem; }
.effective { color: var(--muted); font-size: 0.875rem; font-weight: 500; margin: 0 0 3rem; }

section { padding: 2rem 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }

h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
h3:first-child { margin-top: 0; }

p { margin: 0 0 1rem; color: rgba(14, 16, 19, 0.8); }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 1rem; padding-left: 1.5rem; color: rgba(14, 16, 19, 0.8); }
li { margin-bottom: 0.6rem; }
strong { font-weight: 700; color: var(--ink); }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ---------- callouts ---------- */

.callout-ink {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 1rem;
  padding: 2rem;
  margin: 0 0 3rem;
}
.callout-ink h2 { font-size: 1.25rem; margin-bottom: 1rem; color: #fff; }
.callout-ink p { color: rgba(245, 247, 249, 0.9); }
.callout-ink strong { color: #fff; }

.callout {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--citron);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
  margin: 0 0 1.75rem;
}
.callout .callout-title { font-weight: 700; margin: 0 0 0.6rem; color: var(--ink); }
.callout p { font-size: 0.97rem; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.25rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}
th, td { text-align: left; padding: 0.75rem 1rem; vertical-align: top; }
th { background: var(--secondary); font-weight: 600; color: var(--ink); }
td { border-top: 1px solid var(--border); color: rgba(14, 16, 19, 0.8); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem 0;
  font-size: 0.875rem;
}
.site-footer .inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.15s; }
.site-footer a:hover { color: #fff; }
.site-footer .links { display: flex; gap: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}