/* =============================================================
   FRACTO SERVICES — Legal pages (Privacy / Terms / Security)
   Depends on colors_and_type.css for tokens.
   ============================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 88% -10%, rgba(73,238,244,.07) 0%, transparent 46%),
    radial-gradient(90% 50% at 0% 2%, rgba(156,100,255,.09) 0%, transparent 44%),
    var(--navy-900);
  color: #E7ECF7;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: var(--lh-body);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top bar ---------- */
.lg-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 32px;
  background: rgba(10,14,30,.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lg-top .brand { display: flex; align-items: center; gap: 12px; }
.lg-top .brand img { height: 34px; width: auto; }
.lg-top .brand b { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: #fff; }
.lg-top .back { margin-left: auto; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #B7C0D6; }
.lg-top .back:hover { color: #fff; text-decoration: none; }

/* ---------- header ---------- */
.lg-head { max-width: 1080px; margin: 0 auto; padding: 64px 32px 24px; }
.lg-head .eyebrow { color: var(--cyan); }
.lg-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -.022em; margin: 14px 0 0; color: #fff; }
.lg-head .updated { font-family: var(--font-mono); font-size: 13px; color: #8E97AE; margin-top: 18px; letter-spacing: .02em; }

/* ---------- layout ---------- */
.lg-wrap { max-width: 1080px; margin: 0 auto; padding: 24px 32px 96px; display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.lg-toc { position: sticky; top: 96px; font-size: 14px; }
.lg-toc .toc-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6E7794; margin-bottom: 14px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.lg-toc li { counter-increment: toc; margin: 0 0 2px; }
.lg-toc a { display: block; color: #A9B2C9; padding: 7px 10px; border-radius: var(--r-sm); border-left: 2px solid transparent; transition: background .15s, color .15s; }
.lg-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: #6E7794; margin-right: 9px; }
.lg-toc a:hover { background: rgba(255,255,255,.04); color: #fff; text-decoration: none; }

/* ---------- content ---------- */
.lg-body { min-width: 0; }
.lg-body .intro { font-size: 18px; color: #C3CBDE; line-height: 1.6; margin: 0 0 8px; max-width: 64ch; }
.lg-section { padding-top: 40px; scroll-margin-top: 92px; }
.lg-section h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.012em; color: #fff; margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; }
.lg-section h2 .num { font-family: var(--font-mono); font-size: 14px; color: var(--aura-magenta); font-weight: 700; }
.lg-section h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #EAF0FF; margin: 22px 0 8px; }
.lg-section p { font-size: 15.5px; color: #C3CBDE; margin: 0 0 14px; max-width: 68ch; }
.lg-section ul { margin: 0 0 14px; padding-left: 0; list-style: none; max-width: 68ch; }
.lg-section li { position: relative; padding-left: 22px; margin: 0 0 9px; font-size: 15.5px; color: #C3CBDE; }
.lg-section li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--aura-gradient); }
.lg-section strong { color: #EAF0FF; font-weight: 600; }
.lg-section a { color: var(--cyan); }

/* placeholder chips the business must complete */
.fill { display: inline; padding: 1px 7px; border-radius: 5px; background: rgba(255,24,147,.14); border: 1px dashed rgba(255,24,147,.5); color: #FF9DCB; font-family: var(--font-mono); font-size: 13px; }

/* callout box */
.lg-note { margin: 18px 0; padding: 16px 18px; border-radius: var(--r-md); background: rgba(73,238,244,.06); border: 1px solid rgba(73,238,244,.22); }
.lg-note p { margin: 0; color: #CFE8EB; font-size: 14.5px; }
.lg-note p + p { margin-top: 8px; }

/* contact block */
.lg-contact { margin-top: 14px; padding: 20px 22px; border-radius: var(--r-lg); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.1); }
.lg-contact p { margin: 0 0 6px; }

/* ---------- footer ---------- */
.lg-foot { border-top: 1px solid rgba(255,255,255,.08); }
.lg-foot .inner { max-width: 1080px; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lg-foot .c { color: #7E879E; font-size: 13px; }
.lg-foot .links { margin-left: auto; display: flex; gap: 18px; }
.lg-foot .links a { color: #A9B2C9; font-size: 13px; font-weight: 600; }
.lg-foot .links a:hover { color: #fff; text-decoration: none; }
.lg-foot .links a[aria-current="page"] { color: var(--cyan); }

@media (max-width: 820px) {
  .lg-wrap { grid-template-columns: 1fr; gap: 8px; }
  .lg-toc { display: none; }
  .lg-head, .lg-wrap { padding-left: 22px; padding-right: 22px; }
  .lg-top { padding: 14px 22px; }
}