/*! Veriquest — legal pages.
    Shared by /legal/privacy/, /legal/apps/privacy/, /legal/logica/privacy/ and
    the /legal/terms/* pages. These documents are read, not browsed: one column,
    generous leading, and no canvas layer at all. A legal notice should look
    like a legal notice, and two of these are linked from app store listings,
    so they have to stay legible on a phone with no JavaScript.

    Depends on vq.css for tokens and for the nav/footer chrome. */

:root{
  --acc:#8FA3BF;
  --acc-line:rgba(143,163,191,.42);
  --paper:#C8CFDA;          /* body copy: calmer than --ink-mid at this length */
}

/* ── Masthead ──────────────────────────────────────────────────────── */
.mast{
  padding:clamp(48px,6.5vh,88px) var(--pad) clamp(28px,3.6vh,44px);
  border-bottom:1px solid var(--line);
}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 24px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--acc)}
.mast h1{
  margin:0 0 16px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(26px,3.8vw,46px);line-height:1.25;
  letter-spacing:-.022em;color:var(--ink);line-break:strict;
}
.mast h1 small{display:block;margin-top:10px;font-size:.44em;font-weight:500;
  letter-spacing:0;color:var(--ink-dim)}
.mast p{margin:0;max-width:38em;font-size:clamp(14px,1.45vw,16px);
  line-height:1.95;color:var(--paper)}
.mast .dates{
  margin:clamp(22px,3vh,32px) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* Scope banner. Most arrivals on the app policies come from a store listing
   looking for a specific title, so say up front which document this is. */
.scope{
  margin:clamp(24px,3vh,34px) 0 0;max-width:44em;padding:18px 22px;
  border:1px solid var(--line);border-left:2px solid var(--acc-line);
  border-radius:0 12px 12px 0;background:rgba(255,255,255,.025);
  font-size:13.5px;line-height:1.95;color:var(--ink-mid);
}
.scope a{color:var(--acc);border-bottom:1px solid var(--acc-line)}
.scope a:hover{border-bottom-color:var(--acc)}
.scope ul{margin:.7em 0 0;padding:0;list-style:none}
.scope li{position:relative;padding-left:18px;margin-bottom:.35em}
.scope li::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px;background:var(--acc)}

/* ── Contents ──────────────────────────────────────────────────────── */
.toc{padding:clamp(30px,4vw,48px) var(--pad);border-bottom:1px solid var(--line)}
.toc ol{margin:0;padding:0;list-style:none;max-width:46em;counter-reset:t;column-gap:44px}
.toc li{counter-increment:t;border-bottom:1px solid rgba(255,255,255,.055)}
.toc a{display:flex;align-items:baseline;gap:14px;padding:10px 2px;
  font-size:14px;line-height:1.6;color:var(--ink-mid);transition:color .2s}
.toc a::before{content:counter(t);flex:none;min-width:1.4em;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--acc)}
.toc a:hover{color:var(--ink)}
@media (min-width:760px){.toc ol{columns:2}.toc li{break-inside:avoid}}

/* ── Clauses ───────────────────────────────────────────────────────── */
.doc{padding:clamp(44px,5.2vw,76px) var(--pad) 0}
.doc:last-of-type{padding-bottom:clamp(56px,7vw,104px)}
.doc h2{
  margin:0 0 clamp(18px,2.2vw,26px);
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2.1vw,25px);line-height:1.45;
  letter-spacing:-.014em;color:var(--ink);line-break:strict;
}
.doc h2 .n{margin-right:.7em;font-family:'IBM Plex Mono',monospace;
  font-size:.62em;font-weight:400;letter-spacing:.12em;color:var(--acc)}
.doc h3{margin:1.9em 0 .9em;max-width:34em;
  font-size:15px;font-weight:700;line-height:1.7;color:var(--ink);line-break:strict}
.doc p,.doc li{max-width:34em;font-size:14.5px;line-height:2;color:var(--paper)}
.doc p{margin:0 0 1.4em}
.doc strong{color:var(--ink);font-weight:700}
.doc ul{margin:0 0 1.5em;padding:0;list-style:none;max-width:34em}
.doc ul li{position:relative;margin-bottom:.75em;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:0;top:.94em;width:7px;height:1px;background:var(--acc)}
.doc ol{margin:0 0 1.5em;padding-left:1.5em;max-width:34em}
.doc ol li{margin-bottom:.75em;padding-left:.2em}
.doc a.inline{color:var(--acc);border-bottom:1px solid var(--acc-line)}
.doc a.inline:hover{border-bottom-color:var(--acc)}
.doc + .doc .shell{border-top:1px solid rgba(255,255,255,.07);padding-top:clamp(44px,5.2vw,76px)}
.doc + .doc{padding-top:0}

/* Fact tables — who the operator is, what is collected, how long it is kept. */
.tbl{width:100%;max-width:46em;border-collapse:collapse;margin:0 0 1.6em;
  font-size:13.5px;line-height:1.85}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.tbl th{width:11em;font-weight:700;color:var(--ink);font-size:13px;letter-spacing:.01em}
.tbl td{color:var(--paper)}
.tbl thead th{border-bottom-color:rgba(255,255,255,.18);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:400}
.tbl-wrap{overflow-x:auto}

/* Facts that cannot exist before registration / domain purchase. Loud on
   purpose: none of these may survive to launch. */
.tbd{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.12em;color:#F0B429;border:1px dashed rgba(240,180,41,.55);
  border-radius:6px;padding:3px 10px;background:rgba(240,180,41,.07);
}

.colophon{padding:clamp(40px,5vw,68px) var(--pad);border-top:1px solid var(--line)}
.colophon p{max-width:34em;margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-dim)}
.colophon a{color:var(--acc);border-bottom:1px solid var(--acc-line)}

/* ── /legal/ index ─────────────────────────────────────────────────── */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  max-width:60em}
.docs a{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(255,255,255,.025);
  transition:border-color .3s,background-color .3s,transform .3s;
}
.docs a:hover{border-color:var(--acc-line);background:rgba(255,255,255,.045);transform:translateY(-3px)}
.docs b{display:block;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.docs i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-top:4px}
.docs span.go{margin-left:auto;color:var(--acc);font-size:15px}
.store-note{
  display:inline-block;margin-left:8px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.1em;color:var(--acc);
  border:1px solid var(--acc-line);border-radius:100px;padding:2px 9px;
}