/* Terms & Conditions — frames terms-and-conditions-page (16:805) and
 * mobile-terms-and-conditions (44:544). Overrides on top of pages/legal.css:
 * white workspace, 320px directory with numbered pills, clauses separated by
 * 64px dividers instead of gaps. Numbers from fig-spec. */

.lhero--terms { gap: 12px; padding: 64px var(--container-pad); }
.lhero--terms .lhero__eyebrow { font-family: var(--font-mono); letter-spacing: .14em; }
.lhero--terms .lhero__text { display: contents; }
.lhero--terms .lhero__title { font-size: 56px; line-height: 61px; letter-spacing: -1px; }
.lhero--terms .lhero__lead { max-width: 800px; }

.doc--terms { --doc-side: 320px; --doc-gap: 64px; padding: 64px var(--container-pad); background: var(--color-card); }
.doc--terms .doc__nav { gap: 6px; }
.doc--terms .doc__nav-title { padding-bottom: 12px; letter-spacing: .5px; color: var(--color-ink); }
.doc--terms .doc-toc { gap: 6px; }
.doc--terms .doc-toc__link { gap: 12px; font-weight: 600; color: var(--color-ink); }
.doc--terms .doc-toc__link.is-active { background: var(--color-purple); font-weight: 600; color: var(--color-text); }   /* Figma 16:953: white on purple */
.doc--terms .doc-toc__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line as drawn: the longest label is clipped in the frame too */
.doc--terms .doc-toc__num { font-family: var(--font-mono); font-weight: 800; color: var(--color-muted-2); }
.doc--terms .doc-toc__link.is-active .doc-toc__num { color: var(--color-brand); }

.doc--terms .doc__body { flex: 0 1 820px; min-width: 0; gap: 0; }   /* the body is a fixed 820 column, the right 156px stay empty; it shrinks below 1440 */
.doc--terms .doc-sec { gap: 0; }
.doc--terms .doc-sec__head { gap: 12px; min-height: 24px; }
.doc--terms .doc-sec__num { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 24px; color: var(--color-purple); }
.doc--terms .doc-sec__title { font-size: 22px; line-height: 24px; }
.doc--terms .doc-sec__line { display: none; }
.doc--terms .doc-ps { padding: 16px 0 24px; }
.doc--terms .doc-p { max-width: none; font-size: 15px; line-height: 26px; }
.doc--terms .doc-p--def { line-height: 24px; }
.doc--terms .doc-sec__end { display: block; height: 64px; background: linear-gradient(var(--doc-line), var(--doc-line)) center / 100% 1px no-repeat; }   /* 32 + LINE + 32 between clauses */
.doc--terms .doc-sec:last-of-type .doc-sec__end { display: none; }
.doc-end { display: flex; justify-content: center; padding: 40px 0; }
.doc-end__pill {
  display: inline-flex; padding: 8px 24px; background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-muted-2);
}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .lhero--terms { gap: 20px; padding: 32px var(--container-pad); }
  .lhero--terms .lhero__eyebrow { font-family: var(--font-body); letter-spacing: 1px; }
  .lhero--terms .lhero__text { display: flex; }
  .lhero--terms .lhero__title { font-size: 38px; line-height: 42px; }

  .doc--terms { padding: 0; background: var(--color-card-2); }
  .doc--terms .doc__nav { gap: 12px; }
  .doc--terms .doc__nav-title { padding: 0; letter-spacing: 0; color: var(--color-text); }
  .doc--terms .doc-toc { gap: 2px; }
  .doc--terms .doc-toc__link { padding: 8px; border-radius: var(--radius-sm); font-weight: 700; color: var(--color-muted); }
  .doc--terms .doc-toc__link.is-active { background: var(--color-purple-btn); font-weight: 700; color: var(--color-text); }
  .doc--terms .doc-toc__num { font-size: 12px; line-height: 16px; color: var(--color-muted); }

  .doc--terms .doc__body { flex: initial; width: auto; gap: 32px; }
  .doc--terms .doc-sec { gap: 16px; }
  .doc--terms .doc-sec__head { gap: 8px; min-height: 0; }
  .doc--terms .doc-sec__num { font-family: var(--font-mono); font-weight: 800; font-size: 24px; line-height: 31px; color: var(--color-purple-btn); }
  .doc--terms .doc-sec__title { font-size: 20px; line-height: 22px; color: var(--color-muted); }   /* as drawn in the mobile frame */
  .doc--terms .doc-sec__line { display: block; }
  .doc--terms .doc-ps { gap: 14px; padding: 0; }
  .doc--terms .doc-ps--gap14 { gap: 12px; }
  .doc--terms .doc-p { font-size: 15px; line-height: 24px; color: var(--color-muted); }
  .doc--terms .doc-p--def { line-height: 22px; }
  .doc--terms .doc-sec__end { width: auto; height: 20px; background: linear-gradient(var(--doc-line), var(--doc-line)) bottom / 100% 1px no-repeat; }
  .doc-end { padding: 24px 0; }
  .doc-end__pill { background: var(--color-card); font-size: 12px; line-height: 16px; color: var(--color-muted); }
}