/* legal.css — terms.html and privacy.html only.
   Loaded AFTER styles.css, which supplies the palette, the font and .wrap.
   Kept separate so the landing page can't be broken by a change in here. */

:root{
  --legal-maxw: 720px;
}

/* A longer measure than the landing page: this is reading, not a hero. */
.legal .wrap{ max-width: var(--legal-maxw); }

/* ---------- masthead ---------- */
.legal .masthead{ padding-block: 26px 0; }
.legal .brand{ text-decoration:none; color: inherit; }
.legal .brand:hover .name{ color: var(--blue-link); }
.legal .brand img{ width:40px; height:40px; }
.legal .brand .name{ font-size: 1.08rem; }

/* ---------- document head ---------- */
.dochead{ padding-block: 48px 0; }
.dochead h1{
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 6.4vw, 2.9rem);
  font-variation-settings:'wdth' 110,'wght' 700;
  line-height: 1.04;
  letter-spacing: -0.024em;
}
.version{
  display:inline-block;
  margin: 0;
  padding: 5px 11px;
  border:1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-raise);
  color: var(--muted);
  font-size: .82rem;
  font-variation-settings:'wdth' 100,'wght' 500;
  letter-spacing: .005em;
}

/* ---------- contents ---------- */
.toc{
  margin: 36px 0 0;
  padding: 20px 22px;
  background: var(--ink-raise);
  border:1px solid var(--ink-line);
  border-radius: 10px;
}
.toc h2{
  margin:0 0 12px;
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.09em;
  color: var(--muted);
  font-variation-settings:'wdth' 100,'wght' 650;
}
.toc ol{
  margin:0; padding:0;
  list-style:none;
  columns: 2;
  column-gap: 26px;
}
.toc li{
  margin:0 0 7px;
  font-size:.93rem;
  break-inside: avoid;
}
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration: underline; }

/* ---------- body ---------- */
.doc{ padding-block: 8px 0; }

.doc h2{
  margin: 48px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-line);
  font-size: 1.32rem;
  font-variation-settings:'wdth' 104,'wght' 680;
  letter-spacing: -0.012em;
  line-height: 1.22;
  scroll-margin-top: 20px;
}
.doc > h2:first-child{ border-top:0; padding-top:0; margin-top: 34px; }

.doc p{ margin: 0 0 16px; }
.doc strong{
  color: var(--paper);
  font-variation-settings:'wdth' 100,'wght' 650;
}
.doc em{ color: var(--muted); }

.doc ul, .doc ol{ margin: 0 0 16px; padding-left: 22px; }
.doc li{ margin: 0 0 9px; }
.doc li::marker{ color: var(--muted); }

.doc hr{
  margin: 34px 0;
  border:0;
  border-top:1px solid var(--ink-line);
}

/* ---------- intro, above the contents ---------- */
.intro{ margin: 26px 0 0; max-width: 62ch; }
.intro p{ margin: 0 0 14px; font-size: 1.06rem; color: var(--muted); }
.intro p:last-child{ margin-bottom: 0; }
.intro strong{ color: var(--paper); font-variation-settings:'wdth' 100,'wght' 650; }
.intro a{ color: var(--blue-link); }

/* ---------- category table ---------- */
.tablewrap{
  margin: 0 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid var(--ink-line);
  border-radius: 10px;
}
.doc table{
  width:100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: .96rem;
}
.doc th, .doc td{
  padding: 11px 15px;
  text-align:left;
  vertical-align: top;
  border-bottom:1px solid var(--ink-line);
}
.doc thead th{
  background: var(--ink-raise);
  color: var(--muted);
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.07em;
  font-variation-settings:'wdth' 100,'wght' 650;
  white-space: nowrap;
}
.doc tbody tr:last-child td{ border-bottom:0; }
.doc tbody td:first-child{
  color: var(--paper);
  font-variation-settings:'wdth' 100,'wght' 600;
  white-space: nowrap;
}
.doc tbody td:last-child{ color: var(--muted); }

/* ---------- foot of document ---------- */
.docfoot{
  margin-top: 56px;
  padding-top: 26px;
  border-top:1px solid var(--ink-line);
  color: var(--muted);
  font-size:.93rem;
}
.docfoot a{ margin-right: 18px; }

@media (max-width: 620px){
  .toc ol{ columns: 1; }
  .dochead{ padding-block: 34px 0; }
  .doc h2{ margin-top: 38px; }

  /* A two-column table at phone width means scrolling sideways to read the
     half that matters. Stack it instead: label over description, nothing
     clipped, no horizontal scroll anywhere on the page. */
  .tablewrap{ overflow-x: visible; }
  .doc table{ min-width: 0; }
  .doc thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .doc tr{ display:block; border-bottom:1px solid var(--ink-line); padding: 12px 15px; }
  .doc tbody tr:last-child{ border-bottom:0; }
  .doc td{ display:block; padding:0; border:0; }
  .doc tbody td:first-child{ white-space: normal; margin-bottom: 3px; }
}