/* =========================================================
   Meet Arna — shared stylesheet for the document pages
   (privacy.html, guide.html).

   Tokens, chrome and idioms are lifted from index.html so the
   document pages read as the same site. Index keeps its own
   inline CSS — it is a landing page with hero canvas work that
   these pages don't need, and leaving it untouched keeps the
   risk of this change at zero.
   ========================================================= */
:root {
  --bg:        #020617;
  --panel:     rgba(15, 22, 46, 0.55);
  --panel-2:   rgba(19, 27, 56, 0.72);
  --glass:     rgba(255, 255, 255, 0.035);

  --line:      rgba(150, 170, 210, 0.12);
  --line-2:    rgba(150, 170, 210, 0.22);

  --fg:        #eaf0fb;
  --fg-dim:    #a6b6d2;
  --fg-mute:   #6f7f9c;

  --arna:      #22d3ee;
  --arna-soft: #67e3f5;
  --mem:       #a78bfa;
  --mind:      #f0a742;

  --radius:    18px;
  --maxw:      820px;
  --pad:       clamp(20px, 5vw, 44px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.68;
  font-size: 17px;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ambient corner glows — ported from the landing page */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 42% at 8% 2%,  rgba(34, 211, 238, 0.14), transparent 68%),
    radial-gradient(48% 44% at 96% 6%, rgba(167, 139, 250, 0.13), transparent 70%);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--arna-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.14; letter-spacing: -0.022em; }
::selection { background: rgba(34, 211, 238, 0.28); color: #fff; }
:focus-visible { outline: 2px solid var(--arna); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--arna); color: #04121b;
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
  z-index: 100; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--pad);
  position: relative; z-index: 1;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 8, 22, 0.85);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px; max-width: 1120px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg); font-weight: 700; letter-spacing: -0.02em; font-size: 17px;
}
.brand:hover { text-decoration: none; }
.header-nav { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.header-nav a { color: var(--fg-dim); }
.header-nav a:hover, .header-nav a[aria-current="page"] { color: var(--fg); }
.header-nav a[aria-current="page"] { text-decoration: none; cursor: default; }

/* ---------- page head ---------- */
.doc-head { padding: clamp(38px, 7vw, 68px) 0 clamp(20px, 3vw, 30px); }
.eyebrow {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--arna);
}
.doc-title { font-size: clamp(30px, 5.4vw, 44px); }
.doc-meta {
  margin: 16px 0 0; color: var(--fg-mute); font-size: 14.5px; line-height: 1.7;
}
.doc-lede {
  margin: 22px 0 0; color: var(--fg-dim); font-size: 18px;
}

/* ---------- prose ---------- */
.doc-body { padding-bottom: clamp(50px, 8vw, 90px); }
.doc-body h2 {
  margin: clamp(34px, 5vw, 48px) 0 14px;
  font-size: clamp(20px, 3vw, 25px);
  padding-top: 22px; border-top: 1px solid var(--line);
}
.doc-body h2:first-of-type { border-top: 0; padding-top: 0; }
.doc-body p { margin: 0 0 15px; color: var(--fg-dim); }
.doc-body strong { color: var(--fg); font-weight: 650; }
.doc-body ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.doc-body ul li {
  position: relative; margin: 0 0 13px; padding-left: 22px; color: var(--fg-dim);
}
.doc-body ul li::before {
  content: ""; position: absolute; left: 3px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--arna); opacity: 0.65;
}

.callout {
  margin: 4px 0 26px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.callout p { margin: 0; color: var(--fg); }

/* ---------- guide entries ---------- */
.group-title {
  margin: clamp(36px, 5vw, 50px) 0 4px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--mem);
}
.entries { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.entry {
  padding: 18px 20px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.entry h3 { font-size: 17px; margin-bottom: 8px; }
.entry .say {
  margin: 0 0 10px; color: var(--arna-soft);
  font-style: italic; font-size: 15.5px;
}
.entry p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(4, 8, 22, 0.6);
  padding: 34px 0 40px;
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px; max-width: 1120px;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--fg);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14.5px; }
.footer-links a { color: var(--fg-dim); }
.footer-base {
  max-width: 1120px; margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  color: var(--fg-mute); font-size: 13.5px;
}
.footer-base p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}