/* The look of a document page: the terms and the privacy policy.
 *
 * A separate stylesheet rather than a copy of the landing page's: those two
 * kinds of page have almost nothing in common. One is a pitch built out of
 * sections that alternate grounds; this is prose somebody reads from the top
 * because they want to know what they agreed to. What it does share is the
 * tokens, so the two are visibly the same product.
 *
 * The tokens are taken from packages/ui/src/tokens.css, the same way the
 * landing page takes them, rather than picked to look similar.
 */
:root{
  --navy:#0f172a;
  --brand:#2563eb; --brand-2:#1d4ed8;
  --brand-soft:#eff5ff; --brand-border:#c7dafb;
  --bg:#f4f7fa; --surface:#fff; --surface-2:#f2f5f9;
  --text:#111827; --muted:#4b5563; --subtle:#8a94a6;
  --amber:#d97706;
  --line:#e2e8f0;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:8px; --r:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.68 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
a{color:var(--brand)}
a:hover{color:var(--brand-2)}

/* ---- nav: the way back, and the way in ---- */
nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:20px;height:72px;max-width:960px}
.brand{display:flex;align-items:center;gap:12px;font:600 24px/1 var(--display);
  color:var(--navy);text-decoration:none;letter-spacing:-.02em}
.brand img{width:44px;height:44px;border-radius:10px}
.brand span{color:var(--brand)}
nav .signin{margin-left:auto;font-size:14.5px;color:var(--muted);
  text-decoration:none;white-space:nowrap}
nav .signin:hover{color:var(--brand)}

/* ---- the document ---- */
main{padding:56px 0 96px}
h1{font:700 clamp(30px,4.6vw,44px)/1.14 var(--display);letter-spacing:-.022em;
  margin:0;text-wrap:balance}
h2{font:600 clamp(21px,2.6vw,26px)/1.2 var(--display);letter-spacing:-.018em;
  margin:52px 0 0;text-wrap:balance;scroll-margin-top:96px}
h3{font:600 17px/1.3 var(--display);letter-spacing:-.01em;margin:28px 0 0}
p,ul,ol,table{margin:16px 0 0}
li{margin-top:8px}
ul,ol{padding-left:22px}
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin:0 0 16px}
.lede{font-size:18.5px;color:var(--muted);margin-top:20px}
.meta{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--subtle)}
strong{font-weight:600}

/* A paragraph that answers the question the section title asks, before the
   detail does. Set apart because it is the part most people will read. */
.point{margin-top:20px;padding:16px 18px;background:var(--brand-soft);
  border:1px solid var(--brand-border);border-radius:var(--r);color:var(--navy)}
.point p{margin:0}
.point p + p{margin-top:10px}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
th{font-weight:600;background:var(--surface-2);font-size:13.5px;
  letter-spacing:.02em;color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto;margin-top:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
.scroll table{margin:0}

/* What still has to be filled in before this is published. Loud on purpose:
   a placeholder that blends in is a placeholder that ships. */
.todo{background:#fef3c7;color:#78350f;border:1px dashed var(--amber);
  border-radius:var(--r-sm);padding:1px 7px;font-size:.94em;font-weight:600}

/* ---- footer ---- */
footer{background:var(--navy);color:#aab7cc;padding:40px 0}
footer .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:960px}
footer .brand{color:#fff}
footer .brand span{color:#7ba3ff}
footer nav{position:static;background:none;backdrop-filter:none;border:0}
.foot-links{display:flex;gap:20px;font-size:14.5px}
.foot-links a{color:#aab7cc;text-decoration:none}
.foot-links a:hover{color:#fff}
.lang{margin-left:auto;display:flex;gap:6px}
.lang button{font:500 13.5px var(--body);color:#aab7cc;background:transparent;
  border:1px solid #2b3a55;border-radius:999px;padding:6px 13px;cursor:pointer}
.lang button:hover{color:#fff;border-color:#41537a}
.lang button[aria-pressed="true"]{color:#fff;background:#1b2740;border-color:#41537a}

/* ---- the two languages ---- */
/* Czech shows when nothing has decided otherwise, which is also what a reader
   with no JavaScript gets. Both are in the markup: one document, two versions,
   and a search engine finds sentences in either. */
[data-lang="en"] .doc-cs,
html:not([data-lang="en"]) .doc-en{display:none}

@media(max-width:720px){
  nav .wrap{height:64px;gap:12px}
  .brand{font-size:20px;gap:10px}
  .brand img{width:38px;height:38px}
  main{padding:40px 0 72px}
  footer .wrap{gap:14px}
  .lang{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}