/* ============================================================================
   LoopHQ legal pages: priv.html, tos.html, deletion.html.

   WHY THIS IS A FILE AND index.html IS STILL INLINE. The landing page keeps its
   CSS inline because it is dark and its hero animates on timed delays, so a
   render-blocking stylesheet request risks a white flash before the ground
   paints. These three pages have no animation, are near-identical to each
   other, and share every rule below. Duplicating ~200 lines into each would
   mean a token change had to be made in three places, and it would drift.

   The cost is that the token block now exists twice: inline in index.html and
   here. Two copies, not four. Keep them in step. Each legal page also carries a
   one-line inline background guard ahead of this file, so a slow stylesheet
   cannot flash white before the dark ground lands.

   No emerald and no teal. Those are QuoteLoop's. LoopHQ owns blue, and any
   success state comes from the blue ramp, never a second hue.
   ============================================================================ */

:root{
  --bg:#090a0c;
  --bg-2:#0c0e11;
  --card:#111419;
  --card-edge:#1c2029;
  --stone:#232833;
  --blue:#2563eb;
  --blue-bright:#7aa5ff;
  --blue-dim:#1a3572;
  --ink:#eef1f6;
  --ink-dim:#98a1b2;
  --ink-faint:#5d6577;
  --ease:cubic-bezier(.16,.84,.44,1);
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
::selection{ background:var(--blue-dim); color:var(--ink); }
:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:4px; border-radius:2px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus{
  left:1rem; top:1rem; padding:.7rem 1.1rem;
  background:var(--blue); color:#fff; border-radius:8px;
  text-decoration:none; font-size:.9rem;
}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--blue-bright);
  margin:0 0 1.25rem 0;
}

/* ---------- masthead: the mark, back to the landing page ---------- */
.doc-head{
  padding:3rem 6vw 0 6vw;
  max-width:1200px; margin:0 auto;
}
.doc-mark{
  display:inline-flex; align-items:center; gap:.9rem;
  text-decoration:none;
}
.doc-mark svg{ width:34px; height:34px; flex-shrink:0; }
.doc-mark span{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; letter-spacing:.28em; font-size:.95rem;
}

/* ---------- the document itself ----------
   A reading measure, not a marketing measure. Someone may have to read all
   twenty sections of the privacy policy on a phone to check one clause. */
.doc{
  max-width:70ch;
  margin:0 auto;
  padding:5rem 6vw 7rem 6vw;
  font-size:1rem;
  line-height:1.85;
  color:var(--ink-dim);
}
.doc h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.15; letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 1.4rem 0;
}
.doc-date{
  font-family:'Space Mono', monospace;
  font-size:.78rem; letter-spacing:.1em;
  color:var(--ink);
  margin:0 0 3.5rem 0;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--card-edge);
}
.doc h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:clamp(1.15rem, 2.2vw, 1.45rem);
  line-height:1.3; letter-spacing:-.01em;
  color:var(--ink);
  margin:3.5rem 0 1rem 0;
}
.doc h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:clamp(1rem, 1.7vw, 1.12rem);
  line-height:1.35;
  color:var(--ink);
  margin:2.5rem 0 .8rem 0;
}
.doc p{ margin:0 0 1.3rem 0; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc em{ font-style:italic; color:var(--ink); }
.doc a{ color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px; }
.doc a:hover{ color:var(--ink); }
.doc ul{ margin:0 0 1.5rem 0; padding-left:1.3rem; }
.doc li{ margin-bottom:.6rem; }
.doc li::marker{ color:var(--blue-dim); }

/* the closing contact block: entity, ABN, email on their own lines */
.doc-contact{
  margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--card-edge);
  color:var(--ink);
}
.doc-contact p{ margin:0 0 .3rem 0; }

/* ---------- the provider table (privacy policy, section 8) ----------
   A real table, not a list pretending. It scrolls inside its own box so a
   narrow screen never makes the page itself scroll sideways. */
.doc-tablewrap{
  margin:0 0 1.5rem 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--card-edge);
  border-radius:12px;
}
.doc-table{
  width:100%; min-width:640px;
  border-collapse:collapse;
  font-size:.88rem; line-height:1.6;
}
.doc-table th, .doc-table td{
  text-align:left; vertical-align:top;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--card-edge);
}
.doc-table thead th{
  font-family:'Space Mono', monospace;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-bright);
  background:var(--bg-2);
  white-space:nowrap;
}
.doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td{ border-bottom:0; }
.doc-table tbody th{ font-weight:600; color:var(--ink); white-space:nowrap; }
.doc-table td{ color:var(--ink-dim); }

/* ---------- footer: identical to index.html ---------- */
footer{
  border-top:1px solid var(--card-edge);
  padding:4rem 6vw 3rem 6vw;
  display:flex; flex-wrap:wrap; gap:2rem;
  align-items:center; justify-content:space-between;
}
.foot-brand{ display:flex; align-items:center; gap:.9rem; }
.foot-brand svg{ width:30px; height:30px; }
.foot-brand span{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; letter-spacing:.28em; font-size:.9rem;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.foot-links a{
  color:var(--ink-faint); text-decoration:none;
  font-size:.82rem; transition:color .3s var(--ease);
}
.foot-links a:hover{ color:var(--blue-bright); }
.foot-legal{ color:var(--ink-faint); font-size:.78rem; width:100%; margin-top:1rem; }