/*
 * The terms of service, laid out for reading. Refreshed on 8 October 2026.
 *
 * Wears landing.css for the ground, the type and the header, and adds only
 * this: a header, the contents held beside the text while it scrolls, and a
 * reading measure for the text itself. Not one word of the terms is styled
 * away; the clauses are the page.
 *
 * Loaded before shell.css and app.css, so rules on the existing `terms-*`
 * classes carry a `.tm` prefix to win on specificity.
 */

.tm-hero { display: grid; gap: 14px; padding: 64px 0 40px; max-width: 760px; }
.tm .terms-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tm .terms-lede { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.tm-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 36px 0 96px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- contents */

.tm .terms-toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  /* Never sideways. A list that only scrolls vertically still grew a
     horizontal bar while anything inside reached past its left edge. */
  overflow-x: hidden;
  scrollbar-width: thin;
}
.tm .terms-toc .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-3);
}
.tm .terms-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  /* One column. app.css lays the contents out in two above 600px, which
     suits a full width box and crammed a 260px sidebar into word-per-line
     columns that ran past its edge. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.tm .terms-toc li { counter-increment: toc; font-size: 13.5px; }
.tm .terms-toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px;
  padding: 7px 10px 7px 14px;
  /* The rail is drawn by the links themselves rather than by the list with
     each link pulled 1px left over it. That 1px past the list's edge is what
     gave the contents a horizontal scrollbar. */
  border-left: 2px solid var(--line);
  line-height: 1.35;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tm .terms-toc a::before {
  content: counter(toc);
  font-family: var(--font-mono);
  font-size: 11px;
  padding-top: 2px;
  color: var(--ink-4);
}
.tm .terms-toc a:hover { color: var(--ink); text-decoration: none; }
.tm .terms-toc a.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--ink);
}

/* -------------------------------------------------------------- the text */

.tm-text { display: grid; gap: 52px; max-width: 72ch; }
.tm .terms-s { gap: 14px; scroll-margin-top: 90px; }
.tm .terms-s h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.tm .terms-s h3 { font-size: 15.5px; color: var(--ink); }
.tm .terms-s p,
.tm .terms-list li { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.tm .terms-s .small { font-size: 14.5px; line-height: 1.65; }

/* Section 9 is the billing policy partial; it reads as part of the text. */
.tm [data-billing-policy] > .eyebrow { display: none; }

/* -------------------------------------------------------------- narrow */

@media (max-width: 980px) {
  .tm-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tm .terms-toc {
    position: static;
    max-height: none;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-1);
  }
  /* Full width again, so two columns read well here, down to a phone. */
  .tm .terms-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-hero { padding-top: 40px; }
}

@media (max-width: 600px) {
  .tm .terms-toc ol { grid-template-columns: minmax(0, 1fr); }
}