/* ============================================================
   Shared styling for the document pages (/terms/, /privacy/).

   Same spectral language as the landing page, but set for reading
   rather than for impact: longer measure, taller leading, a real
   heading hierarchy, and no WebGL. A legal page that costs a
   three.js download to read a retention clause is a bad trade, so
   the spectrum appears once as a hairline at the top and then gets
   out of the way.
   ============================================================ */
:root{
  --void:#06060a;
  --panel:#0b0b11;
  --ink:#f7f6f4;
  --body:#b3b1bd;        /* lifted from the landing page's #9b9aa6: this is
                            long-form prose, not a caption */
  --dim:#858494;
  --rule:rgba(247,246,244,.11);
  --rule-soft:rgba(247,246,244,.07);

  --sans:"Google Sans Flex",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Google Sans Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* measured, not guessed: 68ch rendered as 94 characters per line, because ch
     is the width of "0" and most letters in a proportional sans are narrower.
     52ch lands at about 72, which is inside the comfortable range for prose. */
  --measure:52ch;
  --col:1180px;
  --gutter:40px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--void); color:var(--body);
  font-family:var(--sans); font-size:17px; font-weight:300; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}

/* ---- header ------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:10;
  background:rgba(6,6,10,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
/* the one spectral moment: a hairline tying these pages to the landing page */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#b9a4ff,#7fd7ff,#8affd0,#ffe6a3,#ffb0a0);
  opacity:.5}
.header-in{display:flex;align-items:center;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{display:block}
.wordmark{font-size:17px;font-weight:500;letter-spacing:-.01em}
.spacer{flex:1}
.back{color:var(--dim);text-decoration:none;font-size:13px;
  border:1px solid var(--rule);padding:9px 16px;transition:border-color .2s,color .2s}
.back:hover{color:var(--ink);border-color:rgba(247,246,244,.4)}

/* ---- title block ------------------------------------------------------- */
.title{padding:96px 40px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin:0 0 24px}
h1{font-size:clamp(38px,5vw,64px);font-weight:300;line-height:1.04;
  letter-spacing:-.03em;color:var(--ink);margin:0}
.standfirst{max-width:var(--measure);margin:28px 0 0;font-size:19px;color:var(--body)}
.updated{margin:32px 0 0;font-family:var(--mono);font-size:12px;color:var(--dim);
  padding-top:22px;border-top:1px solid var(--rule)}

/* ---- document body ----------------------------------------------------- */
main{padding-bottom:120px}
section{padding:56px 40px 0;max-width:var(--col);margin:0 auto}
h2{font-size:26px;font-weight:400;line-height:1.25;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 20px;padding-top:34px;border-top:1px solid var(--rule)}
h3{font-size:18px;font-weight:500;color:var(--ink);margin:34px 0 12px;letter-spacing:-.008em}
p,li{max-width:var(--measure)}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 10px}
li::marker{color:var(--dim)}
strong,b{color:var(--ink);font-weight:500}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(247,246,244,.35);transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
code,.mono{font-family:var(--mono);font-size:.92em;color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule-soft);margin:48px 0}

/* a definition-style table for the data categories in the privacy policy */
table{border-collapse:collapse;width:100%;max-width:var(--col);margin:0 0 24px;font-size:15px}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:400}

/* ---- the open questions ------------------------------------------------
   These must never be quiet. Every one is a fact nobody has confirmed, and
   the entire point is that the document cannot ship while they are visible. */
.ph,.todo,.ph-block{display:block;margin:18px 0;padding:14px 16px;max-width:var(--measure);
  font-family:var(--mono);font-size:13px;line-height:1.6;
  color:#ffd9a8;background:rgba(255,176,90,.07);
  border:1px solid rgba(255,176,90,.30);border-left:3px solid #ffb05a}
.ph-block p{margin:0;max-width:none;color:inherit}

/* ---- footer ------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--rule);padding:32px 0;margin-top:80px}
.footer-in{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  font-size:13px;color:var(--dim)}
.footer-in p{margin:0;max-width:none}
.footer-in a{color:var(--dim);text-decoration:none}
.footer-in a:hover{color:var(--ink)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:760px){
  :root{--gutter:22px}
  body{font-size:16px}
  .title{padding:64px 22px 0}
  section{padding:44px 22px 0}
  .header-in{height:58px}
  .back{padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---- print -------------------------------------------------------------
   A legal document is the one page on this site people genuinely do print. */
@media print{
  :root{--void:#fff;--ink:#000;--body:#222;--dim:#555;
        --rule:#ccc;--rule-soft:#e5e5e5}
  body{background:#fff;color:#222}
  .site-header{position:static;background:none;backdrop-filter:none}
  .site-header::after{display:none}
  .back{display:none}
  .ph,.todo,.ph-block{background:none;color:#000;border-color:#000}
  a{color:#000}
}

/* ============================================================
   Vocabulary bridge.

   The two documents were drafted separately and ended up with
   different class names for the same things: terms uses .wrap /
   .site-header / .site-footer / .standfirst / .ph, privacy uses
   .sheet / .hdr / .foot / .lede / .todo. Rather than rewrite 30KB
   of legal prose and risk disturbing a clause, the stylesheet
   speaks both. Any third document should use the terms vocabulary.
   ============================================================ */
.sheet{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.sheet > .title,.sheet > section{padding-left:0;padding-right:0}

.hdr{display:flex;align-items:center;height:66px;gap:16px;
  border-bottom:1px solid var(--rule);position:relative}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#b9a4ff,#7fd7ff,#8affd0,#ffe6a3,#ffb0a0);opacity:.5}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--rule);border-radius:999px;padding:3px 9px}

.lede{max-width:var(--measure);margin:28px 0 0;font-size:19px;color:var(--body)}

/* the draft warning. This is a do-not-ship flag, so it gets the loudest
   treatment on the page, louder than the individual open questions. */
.draft,.banner{display:block;margin:40px 0 0;padding:20px 22px;max-width:var(--measure);
  background:rgba(255,176,90,.10);border:1px solid rgba(255,176,90,.42);
  border-left:4px solid #ffb05a;color:#ffe2bd;font-size:15px;line-height:1.6}
.draft strong,.banner strong{color:#fff}
.banner p{margin:8px 0 0;max-width:none;color:inherit}
.banner .m{color:#ffb05a}

/* privacy's retention table, built from divs rather than a <table> */
.rows{margin:0 0 24px;border-top:1px solid var(--rule-soft)}
.row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:16px 0;
  border-bottom:1px solid var(--rule-soft)}
.k{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);padding-top:3px}
.v{color:var(--body);max-width:var(--measure)}
.v .todo{margin:10px 0 0}

.note{padding:16px 18px;background:rgba(247,246,244,.035);
  border-left:2px solid var(--rule);max-width:var(--measure);margin:0 0 20px}
.note p{margin:0;max-width:none}

.foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-size:13px;
  color:var(--dim);border-top:1px solid var(--rule);padding:32px 0;margin-top:80px}
.foot p{margin:0;max-width:none}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--ink)}

.m{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.num{color:var(--dim);font-family:var(--mono)}

@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:6px}
  .hdr{height:58px}
}
@media print{
  .draft,.banner{background:none;color:#000;border-color:#000}
  .note{background:none}
}