/* AlphaBeta — legal & info pages (privacy / terms / cookies / accessibility).
   Shares the landing's palette + fonts. Dark by default, light via
   [data-theme="light"]. Content-first, readable, fully the-aware, RTL. */

/* ===== tokens: dark (default) ===== */
:root, :root[data-theme="dark"] {
  --bg: #0A0B0A;
  --surface: #0E100E;
  --ink: #F1EDE6;
  --muted: rgba(241, 237, 230, 0.60);
  --line: rgba(241, 237, 230, 0.14);
  --accent: #12B37E;
  --accent-ink: #12B37E;
  --primary-fg: #05130D;
  --draft-bg: rgba(201, 162, 75, 0.10);
  --draft-line: #C9A24B;
  --draft-ink: #E8CE94;
  --header-bg: rgba(10, 11, 10, 0.82);
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
/* ===== tokens: light ===== */
:root[data-theme="light"] {
  --bg: #F1EDE6;
  --surface: #FAF8F3;
  --ink: #10130F;
  --muted: #4E544D;
  --line: #DAD2C2;
  --accent: #0B4633;
  --accent-ink: #0A6B4C;
  --primary-fg: #F1EDE6;
  --draft-bg: rgba(180, 134, 58, 0.12);
  --draft-line: #B4863A;
  --draft-ink: #6B4E1B;
  --header-bg: rgba(241, 237, 230, 0.85);
  --shadow: 0 24px 60px rgba(19, 21, 19, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Heebo, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* visible focus for keyboard users, everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* skip link */
.skip {
  position: absolute; right: 12px; top: -60px;
  background: var(--accent); color: var(--primary-fg);
  padding: 10px 18px; border-radius: 8px; font-weight: 600; z-index: 100;
  transition: top .16s ease;
}
.skip:focus { top: 12px; text-decoration: none; }

/* ===== header ===== */
header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 900px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand img { height: 28px; width: 28px; }
.brand b { font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 20px; }
.nav .spacer { margin-inline-start: auto; }
.nav .back {
  font-size: 14px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px;
  transition: border-color .16s ease, color .16s ease;
}
.nav .back:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); border-radius: 9px; cursor: pointer;
  transition: border-color .16s ease;
}
.icon-btn:hover { border-color: var(--accent); }

/* ===== layout ===== */
main { max-width: 820px; margin: 0 auto; padding: 56px 24px 40px; }

.crumb {
  font-family: "Space Grotesk", monospace; font-size: 12px;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 22px;
}
.crumb a:hover { color: var(--accent-ink); }

h1 {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1; letter-spacing: -.015em; margin: 0 0 10px;
}
.lead-sub { color: var(--muted); font-size: 18px; margin: 0 0 8px; }
.updated { color: var(--muted); font-size: 14px; margin: 0 0 30px; }

h2 {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 600; font-size: 1.55rem; line-height: 1.25;
  margin: 44px 0 12px; padding-top: 8px;
}
h3 { font-size: 1.12rem; font-weight: 600; margin: 26px 0 8px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 18px; padding-inline-start: 24px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }

/* draft / legal-review callout */
.draft {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--draft-bg); border: 1px solid var(--draft-line);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 34px;
  color: var(--draft-ink); font-size: 15px; line-height: 1.6;
}
.draft svg { flex: none; margin-top: 2px; }
.draft b { color: var(--draft-ink); }

/* placeholder that the business owner must fill */
.ph {
  background: var(--draft-bg); border: 1px dashed var(--draft-line);
  color: var(--draft-ink); border-radius: 6px;
  padding: 1px 8px; font-family: "Space Grotesk", monospace; font-size: .92em;
  font-weight: 500; white-space: normal;
}

/* tables (cookies list) */
.tbl-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
caption { text-align: start; color: var(--muted); font-size: 13px; padding: 10px 14px; }
th, td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; background: var(--surface); }
tr:last-child td { border-bottom: none; }
code { font-family: "Space Grotesk", monospace; font-size: .9em; background: var(--surface); padding: 1px 6px; border-radius: 5px; }

/* contact block */
.contact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin: 22px 0;
}
.contact p { margin: 0 0 6px; }
.contact p:last-child { margin: 0; }

/* ===== footer ===== */
footer {
  border-top: 1px solid var(--line); margin-top: 48px;
  background: var(--surface);
}
.foot {
  max-width: 820px; margin: 0 auto; padding: 30px 24px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  font-size: 14px; color: var(--muted);
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot .sep { opacity: .5; }
.foot .copy { margin-inline-start: auto; }
@media (max-width: 560px) { .foot .copy { margin-inline-start: 0; width: 100%; } }