/* ═══════════════════════════════════════════════════════════════════════════
   Gloodoh — legal pages
   Shared chrome for /privacy, /terms, /cookies, /refunds, /acceptable-use,
   /data-deletion, /licenses and the /legal index.

   Tokens are lifted verbatim from site/index.html so a legal page and the
   marketing page are visibly the same site. Anything below the TOKENS block is
   specific to long-form documents and has no counterpart on the home page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  FONTS  ───────────────────────────── */
@font-face{font-family:"Montserrat";font-weight:400;src:url(fonts/Montserrat-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:500;src:url(fonts/Montserrat-Medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:600;src:url(fonts/Montserrat-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:700;src:url(fonts/Montserrat-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:900;src:url(fonts/Montserrat-Black.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Gloodoh Digital";font-weight:400;src:url(fonts/digital_display.ttf) format("truetype");font-display:swap}

/* ─────────────────────────────  TOKENS  ──────────────────────────── */
:root{
  --orange:#FE7100; --red:#E70511; --blue:#261A90; --purple:#2B1880;
  --violet:#7C4DFF; --violet-deep:#5A2EE5; --cyan:#00A7C4; --ink:#0D0D25;
  --gold:#E8A93B; --gold-deep:#C9881F;
  --grad-brand:linear-gradient(90deg,var(--red) 0%,var(--orange) 100%);
  --grad-gold:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 45%,#F6D27A 100%);
  --font-sans:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:"Gloodoh Digital","Montserrat",monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-card:20px; --r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#FBFAF7; --on-bg:#0D0D25; --on-soft:#5B5B66;
  --surface:#FFFFFF; --surface-2:#F6F5F1; --divider:#E9E7E0; --muted:#9E9E9E;
  --field:#FFFFFF; --field-border:#E4E2DA;
  --link:rgba(13,13,37,.55); --hairline:rgba(13,13,37,.07);
  --glow:rgba(254,113,0,.16);
}
html[data-theme="dark"]{
  --bg:#0A0A1A; --bg-2:#0D0D25; --on-bg:#F5F4FA; --on-soft:#A7A6B8;
  --surface:#14132A; --surface-2:#1B1A35; --divider:#2A2942; --muted:#6F6E86;
  --field:#16152E; --field-border:#2E2D4A;
  --link:rgba(245,244,250,.55); --hairline:rgba(255,255,255,.07);
  --glow:rgba(254,113,0,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--on-bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5;
  transition:background .5s var(--ease), color .5s var(--ease);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}
img{max-width:100%}

.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* ───────────────────────────  DOC HEADER  ────────────────────────── */
.doc-head{padding:132px 0 var(--s6);position:relative;isolation:isolate}
.doc-head::before{
  content:"";position:absolute;z-index:-1;width:min(70vw,640px);aspect-ratio:1;border-radius:50%;
  left:50%;top:-30%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);filter:blur(8px);
}
.doc-head h1{
  font-weight:900;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(32px,5.4vw,56px);max-width:18ch;margin-top:var(--s4);
}
.doc-head .lede{color:var(--on-soft);font-size:17px;line-height:1.65;max-width:62ch;margin-top:var(--s4)}
.doc-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);font-size:13px;color:var(--muted)}
.doc-meta b{color:var(--on-soft);font-weight:700}

/* audience filter — the documents are written for two different readers, so the
   reader picks which one they are. "All" is the default and no JS is required to
   read the whole document: the hiding only ever happens after a click. */
.aud{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding:5px;background:var(--surface-2);border:1px solid var(--field-border);border-radius:var(--r-pill);width:max-content;max-width:100%}
.aud button{
  font-family:var(--font-sans);font-weight:700;font-size:13px;letter-spacing:.01em;
  color:var(--on-soft);background:transparent;border:none;cursor:pointer;
  padding:9px 18px;border-radius:var(--r-pill);transition:background .25s,color .25s;white-space:nowrap;
}
.aud button:hover{color:var(--on-bg)}
.aud button.on{background:var(--grad-brand);color:#fff}
.aud-hint{font-size:12.5px;color:var(--muted);margin-top:10px;max-width:56ch;line-height:1.5}

/* ────────────────────────────  LAYOUT  ───────────────────────────── */
.doc-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:clamp(32px,5vw,72px);padding-bottom:var(--s9);align-items:start}
.toc{position:sticky;top:96px;max-height:calc(100vh - 128px);overflow-y:auto;padding-right:var(--s3);scrollbar-width:thin}
.toc h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}
.toc ol{list-style:none;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:10px;font-size:13.5px;line-height:1.4;color:var(--link);
  padding:7px 10px;border-radius:var(--r-sm);border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.toc a::before{content:counter(toc) ".";font-family:var(--font-display);font-size:11px;color:var(--muted);flex:none;padding-top:2px}
.toc a:hover{color:var(--on-bg);background:color-mix(in srgb,var(--on-bg) 5%,transparent)}
.toc a.active{color:var(--orange);border-left-color:var(--orange);background:color-mix(in srgb,var(--orange) 8%,transparent)}
.toc a.active::before{color:var(--orange)}
@media(max-width:960px){
  .doc-layout{grid-template-columns:1fr}
  .toc{position:static;max-height:none;padding:var(--s5);background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-card);margin-bottom:var(--s6)}
}

/* ─────────────────────────────  PROSE  ───────────────────────────── */
.prose{max-width:74ch;font-size:16px;line-height:1.72;color:var(--on-bg)}
.prose section{scroll-margin-top:96px;padding-top:var(--s6)}
.prose section + section{border-top:1px solid var(--hairline);margin-top:var(--s6)}
.prose h2{
  font-weight:900;font-size:clamp(22px,3vw,29px);letter-spacing:-.022em;line-height:1.2;
  margin-bottom:var(--s4);display:flex;gap:14px;align-items:baseline;
}
.prose h2 .n{font-family:var(--font-display);font-size:15px;color:var(--orange);flex:none;font-variant-numeric:tabular-nums}
.prose h3{font-weight:800;font-size:18px;letter-spacing:-.012em;margin:var(--s5) 0 var(--s3);color:var(--on-bg)}
.prose h4{font-weight:700;font-size:15px;margin:var(--s4) 0 var(--s2);color:var(--on-bg)}
.prose p{color:var(--on-soft);margin-bottom:var(--s4)}
.prose p strong,.prose li strong{color:var(--on-bg);font-weight:700}
.prose ul,.prose ol{color:var(--on-soft);margin:0 0 var(--s4) 0;padding-left:var(--s5)}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--orange)}
.prose a:not(.btn){color:var(--orange);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--orange) 35%,transparent);transition:border-color .2s}
.prose a:not(.btn):hover{border-bottom-color:var(--orange)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--surface-2);border:1px solid var(--hairline);border-radius:6px;padding:2px 6px;color:var(--on-bg)}
.prose hr{border:none;border-top:1px solid var(--hairline);margin:var(--s6) 0}

/* a defined term, used the first time a document introduces one */
.term{font-weight:700;color:var(--on-bg)}

/* ──────────────────────────  COMPONENTS  ─────────────────────────── */
/* audience-scoped block: a passage that applies to only one kind of reader */
.for{
  position:relative;border:1px solid var(--divider);border-radius:var(--r-card);
  padding:var(--s5) var(--s5) var(--s3);margin:var(--s5) 0;background:color-mix(in srgb,var(--surface) 60%,transparent);
}
.for > .for-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s3);
}
.for[data-aud="consumer"]{border-left:3px solid var(--orange)}
.for[data-aud="consumer"] > .for-tag{color:var(--orange)}
.for[data-aud="supplier"]{border-left:3px solid var(--violet)}
.for[data-aud="supplier"] > .for-tag{color:var(--violet)}
.for .for-tag::before{content:"";width:16px;height:1.5px;border-radius:2px;background:currentColor;opacity:.6}
.for > :last-child{margin-bottom:var(--s3)}

/* a point that must not be missed — a liability limit, a deadline, a warning */
.note{
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:var(--s5) 0;
  border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);
  background:color-mix(in srgb,var(--gold) 9%,transparent);
}
.note p{color:var(--on-bg);margin-bottom:0}
.note p + p{margin-top:var(--s3)}
.note .note-tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
html[data-theme="dark"] .note .note-tag{color:var(--gold)}

/* tables — retention schedules, data categories, processor lists */
.table-scroll{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--divider);border-radius:var(--r-lg)}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.prose th,.prose td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--on-soft)}
.prose th{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:none}
.prose td strong{color:var(--on-bg)}

/* contact / action strip at the end of a document */
.doc-cta{
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-card);
  padding:clamp(24px,3.4vw,36px);margin-top:var(--s7);
}
.doc-cta h3{font-weight:900;font-size:21px;letter-spacing:-.02em;margin-bottom:6px}
.doc-cta p{color:var(--on-soft);font-size:14.5px;max-width:48ch;margin:0}
.btn{
  font-family:var(--font-sans);font-weight:700;font-size:15px;border:none;cursor:pointer;
  padding:15px 28px;border-radius:var(--r);display:inline-flex;align-items:center;gap:9px;
  transition:transform .2s var(--ease),box-shadow .2s,filter .2s;white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-grad{background:var(--grad-brand);color:#fff;box-shadow:0 6px 20px -6px rgba(231,5,17,.55)}
.btn-grad:hover{filter:brightness(1.06);box-shadow:0 10px 28px -6px rgba(231,5,17,.6);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--on-bg);border:1.5px solid var(--field-border)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* sibling-document navigation */
.doc-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);margin-top:var(--s6)}
.doc-more a{
  display:flex;flex-direction:column;gap:6px;padding:var(--s5);border-radius:var(--r-lg);
  border:1px solid var(--divider);background:var(--surface);transition:border-color .3s,transform .3s var(--ease);
}
.doc-more a:hover{border-color:var(--orange);transform:translateY(-3px)}
.doc-more strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.doc-more span{font-size:13px;color:var(--on-soft);line-height:1.45}

/* ────────────────────────────  FOOTER  ───────────────────────────── */
footer{border-top:1px solid var(--divider);padding:var(--s8) 0 var(--s6)}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--s6)}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:30ch}
.foot-brand img{height:26px;width:auto}
html[data-theme="dark"] .foot-word{filter:brightness(0) invert(1)}
.foot-brand p{font-size:13.5px;color:var(--on-soft);line-height:1.55}
.foot-cols{display:flex;gap:var(--s8);flex-wrap:wrap}
.foot-col h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14px;color:var(--link);margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--orange)}
.itsitso{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--divider);border-radius:var(--r-pill);transition:border-color .25s,transform .25s;font-size:13px;font-weight:600;color:var(--on-bg)}
.itsitso img{width:20px;height:20px}
.itsitso:hover{border-color:var(--violet);transform:translateY(-1px)}
.itsitso b{font-weight:800}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--hairline);font-size:12.5px;color:var(--muted)}
.foot-bottom a:hover{color:var(--orange)}

@media(max-width:860px){ .foot-grid{flex-direction:column} }
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}
@media print{
  .gnav,.toc,.aud,.aud-hint,.doc-more,.doc-cta{display:none!important}
  .doc-layout{grid-template-columns:1fr}
  .doc-head{padding-top:0}
  body{background:#fff;color:#000}
  .prose{max-width:none;font-size:11pt}
  .prose section{break-inside:avoid-page}
}