/* The prose pages — privacy and terms — on the same surface as everything
   else. Somebody who clicks "read the privacy policy" from the page that just
   promised their voice stays on their Mac should not land somewhere that looks
   like a different company. Layers on site.css. */

.wrap--doc {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 76px) var(--gutter) clamp(64px, 9vw, 104px);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.brand svg { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.wordmark { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.wordmark .i { color: var(--amber); }

h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem); margin-bottom: 12px; }
h2 {
  margin: 48px 0 12px;
  font-size: 1.1875rem; letter-spacing: -.024em;
  padding-top: 28px; border-top: 1px solid var(--hair);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

.updated {
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: var(--t-micro); color: var(--text-3);
}
.lede {
  margin-top: 0;
  font-size: var(--t-lede); line-height: 1.5;
  color: var(--text); letter-spacing: -.016em;
}

p, li { color: var(--text-2); font-size: var(--t-small); line-height: 1.7; }
p { margin: 14px 0; }
strong { color: var(--text); font-weight: 590; }

ul, ol { padding-left: 22px; margin: 14px 0; }
li { margin: 8px 0; }
li::marker { color: var(--text-3); }

a:not(.brand) {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--amber-line);
  transition: text-decoration-color .2s ease;
}
a:not(.brand):hover { text-decoration-color: var(--amber); }

/* The pull-out that states the whole policy in three sentences. */
.box {
  margin: 26px 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(240,174,78,.05), transparent 70%), var(--surface);
  box-shadow: 0 0 0 1px var(--amber-line) inset;
}
.box p { margin: 0; font-size: var(--t-small); }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: var(--t-micro); }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--hair); }
th { color: var(--text-3); font-weight: 590; letter-spacing: .02em; }
td { color: var(--text-2); }

footer {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
footer a, footer a:not(.brand) {
  font-size: var(--t-micro); color: var(--text-3);
  text-decoration: none;
  transition: color .18s ease;
}
footer a:hover { color: var(--text); }