/* ============================================================
   NannyEye — shared styling for legal / policy pages
   ============================================================ */
:root{
  --bg-deep:#05070D; --bg-page:#0A0E1A; --bg-surface:#111827; --bg-elevated:#1A2236;
  --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.13);
  --cyan:#00D4FF; --cyan-08:rgba(0,212,255,0.08); --cyan-30:rgba(0,212,255,0.30);
  --text:#EEF2F7; --muted:#9AA8B8; --label:#5A6A7E;
  --font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:radial-gradient(900px 560px at 80% -10%, rgba(13,24,46,.7), transparent 70%), var(--bg-deep);
  color:var(--text); font-family:var(--font-body); font-size:15.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg{ display:block; }

/* top bar */
.l-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:18px clamp(20px,5vw,48px);
  background:rgba(5,7,13,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.l-brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--text); }
.l-brand:hover{ text-decoration:none; }
.l-brand img{ width:28px; height:28px; border-radius:24%; }
.l-bar .gap{ flex:1; }
.l-bar a.back{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--label); }
.l-bar a.back:hover{ color:var(--cyan); text-decoration:none; }

/* layout */
.l-wrap{ width:min(820px, calc(100% - 40px)); margin:0 auto; padding:46px 0 30px; }
.l-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); }
h1.l-title{ font-family:var(--font-display); font-size:clamp(30px,5vw,44px); font-weight:700; letter-spacing:-.02em; margin:14px 0 10px; }
.l-meta{ font-size:12.5px; color:var(--label); margin-bottom:10px; }
.l-meta b{ color:var(--muted); font-weight:600; }

/* the important "review me" banner — shown to the operator, easy to delete */
.l-flag{
  margin:22px 0 8px; padding:14px 16px; border-radius:12px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.32);
  color:#FCD9A0; font-size:13px; line-height:1.6;
}
.l-flag b{ color:#FFE3B3; }

/* intro */
.l-intro{ color:var(--muted); font-size:16px; margin:18px 0 8px; }

/* table of contents */
.l-toc{
  margin:26px 0 10px; padding:18px 20px; border-radius:14px;
  background:var(--bg-surface); border:1px solid var(--border);
}
.l-toc h2{ font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--label); margin-bottom:12px; }
.l-toc ol{ list-style:none; counter-reset:toc; columns:2; column-gap:30px; }
.l-toc li{ counter-increment:toc; margin-bottom:7px; font-size:13.5px; break-inside:avoid; }
.l-toc li::before{ content:counter(toc) ". "; color:var(--cyan); font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .l-toc ol{ columns:1; } }

/* sections */
section.l-sec{ margin-top:34px; scroll-margin-top:80px; }
h2.l-h{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; display:flex; gap:10px; align-items:baseline; }
h2.l-h .n{ color:var(--cyan); font-size:15px; font-variant-numeric:tabular-nums; }
h3.l-h3{ font-family:var(--font-display); font-size:15.5px; font-weight:600; margin:20px 0 8px; color:#DCE6F2; }
.l-wrap p{ margin-bottom:14px; color:#D3DBE6; }
.l-wrap ul, .l-wrap ol.l-list{ margin:0 0 14px 4px; padding-left:22px; }
.l-wrap li{ margin-bottom:8px; color:#D3DBE6; }
.l-wrap strong{ color:#fff; font-weight:600; }
.l-wrap a{ word-break:break-word; }

/* definition / data tables */
table.l-table{ width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:13.5px; }
table.l-table th, table.l-table td{ text-align:left; padding:10px 12px; border:1px solid var(--border); vertical-align:top; }
table.l-table th{ background:var(--bg-surface); color:#C8D2DF; font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
table.l-table td{ color:#C9D3DF; }

/* callout */
.l-note{
  margin:14px 0 18px; padding:13px 16px; border-radius:12px;
  background:var(--cyan-08); border:1px solid var(--cyan-30); color:#BDE9F6; font-size:14px;
}
.l-note.warn{ background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.3); color:#FBD9A2; }

/* placeholder highlight so blanks are obvious before launch */
.ph{ background:rgba(245,158,11,.16); color:#FFD98A; padding:0 5px; border-radius:4px; font-weight:600; font-size:.95em; }

/* footer */
.l-footer{
  border-top:1px solid var(--border); margin-top:48px;
  padding:34px clamp(20px,5vw,48px) 44px;
}
.l-footer-inner{ width:min(820px,calc(100% - 40px)); margin:0 auto; }
.l-footlinks{ display:flex; flex-wrap:wrap; gap:14px 22px; margin-bottom:20px; }
.l-footlinks a{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
.l-footlinks a:hover{ color:var(--cyan); text-decoration:none; }
.l-footlinks a.cur{ color:var(--cyan); }
.l-copy{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); line-height:2; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }