/* ============================================================
   privacy.html — page-specific styles. Loaded after css/base.css.
   ============================================================ */

html{ scroll-behavior:smooth; }
body{ padding: 56px 16px 96px; }

.sheet{ max-width:640px; }

/* ---------- title block ---------- */
.brand{ padding: 36px 28px 24px; text-align:center; border-bottom: var(--line) solid var(--ink); }
.kicker{
  font-family:'Space Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.15em;
  color: var(--cobalt); margin:0 0 8px;
}
.name{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase;
  margin: 0 0 12px;
}
.effective-date{
  font-family:'Space Mono', monospace; font-size:12px;
  letter-spacing:.05em; opacity:.65; margin:0;
}
.effective-date span{ color: var(--coral); font-weight:700; }

/* ---------- table of contents (styled like the link cards) ---------- */
.toc{
  padding: 24px 28px 8px;
}
.toc-label{
  font-family:'Space Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; opacity:.6;
  margin: 0 0 12px;
}
.toc-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  list-style:none; margin:0 0 8px; padding:0;
}
.toc-item{ position:relative; }
.toc-dup{
  position:absolute; inset:0; background: var(--tag, var(--cobalt));
  border: var(--line) solid var(--ink); transform: translate(4px,4px);
  transition: transform .15s ease;
}
.toc-front{
  position:relative; display:flex; align-items:center; gap:8px;
  background: var(--paper); border: var(--line) solid var(--ink);
  padding: 9px 10px; transition: transform .15s ease;
}
.toc-item:hover .toc-front{ transform: translate(-2px,-2px); }
.toc-item:hover .toc-dup{ transform: translate(6px,6px); }
.toc-num{
  font-family:'Space Mono', monospace; font-weight:700; font-size:11px;
  color: var(--tag, var(--cobalt));
}
.toc-front span.label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}

/* ---------- policy content ---------- */
.content{ padding: 12px 28px 8px; }

.content section{
  padding: 26px 0;
  border-top: 1px solid rgba(23,20,15,.15);
  scroll-margin-top: 20px;
}
.content section:first-child{ border-top: var(--line) solid var(--ink); margin-top:12px; }

.content h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: 1.05rem;
  text-transform:uppercase;
  letter-spacing:.01em;
  display:flex; align-items:baseline; gap:10px;
  margin: 0 0 14px;
  color: white
}
.content h2 .num{
  font-family:'Space Mono', monospace;
  font-weight:700; font-size:.8rem;
  color: var(--coral);
}

.content p{ margin: 0 0 12px; font-size:14.5px; line-height:1.7; color: white }
.content ul{ margin: 0 0 12px; padding-left: 20px; color: white }
.content li{ margin-bottom: 8px; font-size:14.5px; line-height:1.6; color: white }

.fill{
  background: rgba(44,62,255,.12);
  color: var(--cobalt);
  padding: 1px 6px;
  font-weight:700;
  font-family:'Space Mono', monospace;
  font-size: 0.85em;
}

.callout{
  background: var(--mint);
  border: var(--line) solid var(--ink);
  padding: 12px 14px;
  font-family:'Space Mono', monospace;
  font-size: 12px;
  line-height:1.6;
  margin: 0 0 12px;
}

footer a{ text-decoration:underline; opacity:1; }

@media (max-width:480px){
  .toc-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .toc-front, .toc-dup{ transition:none; }
}

/* ============================================================
   DESKTOP BREAKPOINT — mobile styles above stay the default.
   Above 900px, the TOC becomes a sticky sidebar next to the
   content instead of a block stacked above it.
   ============================================================ */
@media (min-width: 900px){
  body{ padding: 80px 32px; }
  .sheet{ max-width: 960px; box-shadow: 14px 14px 0 var(--mint); }
  .brand{ padding: 48px 48px 30px; }
  .disclaimer{ margin: 24px 48px 0; }

  .doc-layout{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items:start;
    padding: 28px 48px 12px;
  }
  .toc{ padding:0; position:sticky; top:24px; }
  .toc-grid{ grid-template-columns: 1fr; }
  .content{ padding:0; }
  .content p, .content li{ font-size:15.5px; }
  footer{ padding: 20px 48px 28px; }
}