/* Shared stylesheet for the legal pages (privacy, terms, subprocessors, support).
   The marketing page keeps its own inline <style> block; this file exists so the four
   prose pages do not duplicate 160 lines of section CSS they never use.
   Tokens, font stack and the nav/footer rules below are copied verbatim from
   index.html so the two never drift apart visually. */

:root{
  --ink:#161a1f; --navy:#1b2434; --maroon:#7c1f1c; --yellow:#f6c94b;
  --green:#2f8f5b; --star:#f5a623;
  --muted:#5c6167; --muted-2:#4b5158; --muted-3:#8b8f95;
  --line:#eceae7; --line-soft:#f2f0ed; --tint:#f7f6f4;
  --pad:clamp(20px,4vw,32px);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:'Geist',-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--maroon)}
h1,h2,h3{font-weight:600}
.page{width:100%;min-height:100vh;background:#fff;overflow-x:hidden}

/* ---------- nav (copied from index.html) ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav__bar{max-width:1200px;margin:0 auto;padding-inline:var(--pad);height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:-.02em}
.brand img{width:46px;height:53px;object-fit:contain;display:block}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;color:var(--muted-2)}
.nav-cta{background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:10px 18px;border-radius:10px;white-space:nowrap}
.nav-cta:hover{background:var(--maroon);color:#fff}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.nav-burger span{display:flex;flex-direction:column;gap:5px;width:20px}
.nav-burger i{height:2px;background:currentColor;border-radius:2px;display:block}
.nav-burger .b1{transition:transform .22s ease}
.nav-burger .b2{transition:opacity .18s ease}
.nav-burger .b3{transition:transform .22s ease}
.nav-burger.is-open .b1{transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open .b2{opacity:0}
.nav-burger.is-open .b3{transform:translateY(-7px) rotate(-45deg)}
.nav-sheet{overflow:hidden;border-top:1px solid var(--line);background:#fff;max-height:0;transition:max-height .28s ease}
.nav-sheet.is-open{max-height:340px}
.nav-sheet__inner{display:flex;flex-direction:column;padding:8px var(--pad) 20px}
.nav-sheet a{padding:14px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--line-soft)}
.nav-sheet .sheet-cta{margin-top:16px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;padding:14px;border-radius:12px;text-align:center;border-bottom:0}
.nav-sheet .sheet-cta:hover{background:var(--maroon);color:#fff}
@media (max-width:820px){.nav-links{display:none}.nav-cta{display:none}.nav-burger{display:flex}}
@media (min-width:821px){.nav-sheet{display:none}}

/* ---------- document masthead ---------- */
.doc-head{border-bottom:1px solid var(--line);background:var(--tint)}
.doc-head__inner{max-width:1200px;margin:0 auto;padding:clamp(38px,6vw,64px) var(--pad) clamp(30px,5vw,46px)}
.doc-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--maroon);margin:0 0 14px}
.doc-head h1{font-size:clamp(32px,5vw,48px);line-height:1.05;letter-spacing:-.03em;margin:0;max-width:16ch}
.doc-dates{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.doc-dates b{font-weight:500;color:var(--ink)}
.doc-lede{margin:22px 0 0;max-width:62ch;font-size:17px;line-height:1.6;color:var(--muted-2)}

/* ---------- two-column body ---------- */
.doc{max-width:1200px;margin:0 auto;padding:clamp(34px,5vw,56px) var(--pad) 88px;display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:minmax(0,1fr)}
/* Grid items default to min-width:auto, which lets a wide child (the tables, whose
   min-width is 560px) stretch the track past the viewport. The page then clips it and
   the table is unreachable rather than scrollable. These two lines are what make
   .tablewrap's own overflow-x:auto actually take effect. */
.doc > *{min-width:0}
@media (min-width:1000px){
  .doc{grid-template-columns:214px minmax(0,1fr)}
  .toc{position:sticky;top:92px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
}
.toc{font-size:14px;line-height:1.45}
.toc h2{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-3);margin:0 0 12px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:2px}
.toc a{display:flex;gap:9px;padding:6px 0;color:var(--muted-2)}
.toc a::before{content:counter(toc);font-family:var(--mono);font-size:12px;color:var(--muted-3);min-width:15px;padding-top:1px}
.toc a:hover{color:var(--maroon)}
.toc a:hover::before{color:var(--maroon)}

/* ---------- prose ---------- */
.prose{font-size:16.5px;line-height:1.68;color:var(--muted-2)}
/* Prose is measured for reading; tables are not. Capping the text at 68ch while letting
   .tablewrap fill the whole grid track stops five-column tables from being squeezed into a
   reading column and wrapping every cell onto three lines. */
.prose > section > *:not(.tablewrap){max-width:68ch}
.prose > section{scroll-margin-top:88px;padding-top:6px}
.prose > section + section{margin-top:52px;padding-top:44px;border-top:1px solid var(--line-soft)}
.prose h2{counter-increment:sec;font-size:23px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px;display:flex;gap:12px;align-items:baseline}
.prose h2::before{content:counter(sec);font-family:var(--mono);font-size:13px;font-weight:400;color:var(--maroon);min-width:20px}
.prose{counter-reset:sec}
.prose h3{font-size:16.5px;color:var(--ink);margin:30px 0 10px;letter-spacing:-.01em}
.prose p{margin:0 0 15px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);border-bottom:1px solid #cdc9c4}
.prose a:hover{color:var(--maroon);border-bottom-color:var(--maroon)}
.prose ul,.prose ol{margin:0 0 15px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--muted-3)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--tint);padding:1.5px 5px;border-radius:4px;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose > section > *:last-child{margin-bottom:0}

/* a definition list for the "what we collect" groups */
.deflist{margin:0 0 15px;padding:0}
.deflist dt{font-weight:600;color:var(--ink);margin-top:16px}
.deflist dt:first-child{margin-top:0}
.deflist dd{margin:4px 0 0}

/* ---------- callouts ---------- */
.note{margin:22px 0;padding:18px 20px;background:var(--tint);border-left:2px solid var(--maroon);border-radius:0 8px 8px 0;font-size:15.5px;line-height:1.6}
.note--plain{border-left-color:var(--muted-3)}
.note p:last-child{margin-bottom:0}
.note__label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--maroon);margin-bottom:8px}
.note--plain .note__label{color:var(--muted-3)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5}
th{font-weight:600;color:var(--ink);background:var(--tint);font-size:13px;letter-spacing:.01em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:600;color:var(--ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.tag--on{background:#e8f3ec;color:#1d6b45}
.tag--off{background:var(--line-soft);color:var(--muted)}

/* a filled-in placeholder the publisher still has to replace */
.fill{font-family:var(--mono);font-size:.9em;background:#fdf6e3;border-bottom:1px dashed #d6b656;padding:1px 4px;border-radius:3px;color:#7a5b00}

/* ---------- footer (copied from index.html) ---------- */
.foot{border-top:1px solid var(--line)}
.foot__inner{max-width:1200px;margin:0 auto;padding:28px var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:14px;color:var(--muted)}
.foot__brand{display:flex;align-items:center;gap:10px}
.foot__brand img{width:22px;height:22px;object-fit:contain;display:block}
.foot__links{display:flex;gap:24px}
.foot__links a{color:var(--muted)}
.foot__links a[aria-current]{color:var(--ink);font-weight:500}