/* 15 — legal pages (terms.html / privacy.html): the site's type scale and spacing applied to long-form text.
   Desktop: a sticky left column (title, date, contents) and a reading column on the right. Mobile: one column. */
.legal {
  background: var(--surface-white);
  color: var(--text-ink);
  font-family: var(--font);
}
.legal__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--section-pad) var(--page-pad);
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  column-gap: 120px;
  align-items: start;
}
.legal__aside { align-self: stretch; }
.legal__sticky { position: sticky; top: calc(68px + var(--announce-h, 0px) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.legal__eyebrow { margin: 0; color: var(--text-muted); letter-spacing: -0.56px; }
.legal__title { margin: 0; font: 500 54px/58px var(--font); letter-spacing: -2.16px; color: var(--brand-primary); }
.legal__updated { margin: 0; color: var(--text-muted); }
.legal__toc { margin-top: 32px; width: 100%; max-width: 360px; max-height: calc(100vh - 68px - var(--announce-h, 0px) - 300px); overflow-y: auto; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--surface-subtle); }
.legal__toc li { border-bottom: 1px solid var(--surface-subtle); }
.legal__toc-link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0;
  font: 600 14px/18px var(--font); letter-spacing: -0.56px;
  color: var(--text-muted); text-decoration: none;
  transition: color .2s ease, padding-left .3s cubic-bezier(.23, 1, .32, 1);
}
.legal__toc-num { font: 500 12px/16px var(--mono, ui-monospace, "SF Mono", Menlo, monospace); color: var(--brand-secondary); flex: none; width: 24px; letter-spacing: 0; }
.legal__toc-link:hover { color: var(--brand-primary); padding-left: 6px; }
.legal__toc-link.is-active { color: var(--brand-primary); }
.legal__toc-link.is-active .legal__toc-num { color: var(--brand-primary); }

.legal__content { display: flex; flex-direction: column; gap: 56px; max-width: 760px; }
.legal__section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(68px + var(--announce-h, 0px) + 32px); }
.legal__h { margin: 0 0 8px; font: 500 32px/36px var(--font); letter-spacing: -0.96px; color: var(--brand-primary); }
.legal__p { margin: 0; font: 400 16px/24px var(--font); letter-spacing: -0.32px; color: var(--text-ink); }
.legal__p strong { font-weight: 600; }
.legal__p a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-secondary); transition: text-decoration-color .2s ease; }
.legal__p a:hover { text-decoration-color: var(--brand-primary); }
.legal__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legal__list li { position: relative; padding-left: 28px; font: 400 16px/24px var(--font); letter-spacing: -0.32px; }
.legal__list li strong { font-weight: 600; }
.legal__list li::before {
  content: ""; position: absolute; left: 5px; top: 9px; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

@media (max-width: 1100px) {
  .legal__inner { column-gap: 64px; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); }
  .legal__title { font: 500 38px/42px var(--font); letter-spacing: -1.14px; }
}
@media (max-width: 767px) {
  .legal__inner { display: flex; flex-direction: column; gap: 40px; padding: 64px var(--page-pad) 80px; }
  .legal__sticky { position: static; gap: 12px; }
  .legal__title { font: 500 32px/36px var(--font); letter-spacing: -0.96px; }
  .legal__toc { margin-top: 16px; max-width: none; }
  .legal__content { gap: 40px; }
  .legal__h { font: 500 24px/28px var(--font); letter-spacing: -0.48px; }
}

/* ---- the slide-out version: same panel as Contact us, half the screen wide, no contents column ---- */
.legal-drawer { width: 50vw; max-width: calc(100vw - 48px); gap: 0; padding: 0 48px 48px; }
.legal-drawer .contact-drawer__bar {
  position: sticky; top: 0; z-index: 2;
  padding: 48px 0 24px;
  background: var(--surface-white);
  /* a soft fade under the bar as the text scrolls beneath it */
  box-shadow: 0 16px 16px -8px var(--surface-white);
}
.legal-drawer__body { display: flex; flex-direction: column; gap: 40px; padding-top: 4px; }
.legal-drawer .legal__updated { margin: 0 0 -8px; }
.legal-drawer .legal__section { gap: 12px; scroll-margin-top: 0; }
.legal-drawer .legal__h { font: 500 24px/28px var(--font); letter-spacing: -0.72px; margin: 0 0 4px; }
.legal-drawer .legal__content { max-width: none; }
@media (max-width: 1100px) { .legal-drawer { width: 66vw; } }
@media (max-width: 767px) {
  .legal-drawer { width: auto; max-width: none; padding: 0 24px 24px; }
  .legal-drawer .contact-drawer__bar { padding: 24px 0 16px; }
  .legal-drawer__body { gap: 32px; }
  .legal-drawer .legal__h { font: 500 20px/24px var(--font); letter-spacing: -0.4px; }
}
.legal-drawer:focus { outline: none; }