/* Legal pages (privacy/ and terms/): a calm reading layout in the site's style.
   The headline, "the short version" in a lilac card, then the text with a contents
   list that stays beside it on computers (legal.js marks the section you're on). */

.legal { width: min(1100px, calc(100% - 32px)); margin: 0 auto 120px; }
.lg-head { padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 40px); text-align: center; }
.lg-title .l1 { font-size: clamp(44px, 6vw, 80px); }
.lg-title .l2 { font-size: clamp(38px, 5.2vw, 68px); }
.lg-date { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

/* the short version */
.lg-short { max-width: 880px; margin: 0 auto; padding: clamp(24px, 3.5vw, 36px) clamp(22px, 4vw, 44px); border-radius: 24px; background: var(--lilac); border: 1px solid #DDD3FB; }
.lg-short h2 { margin: 0 0 18px; font: 700 26px/1.15 var(--display); }
.lg-short ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.lg-short li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: #3E3858; }
.lg-short li b { color: var(--ink); }
.lg-short li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* the text, with the contents beside it */
.lg-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; margin-top: clamp(48px, 6vw, 72px); }
.lg-toc { position: sticky; top: 100px; align-self: start; }
.lg-toc p { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.lg-toc ol { margin: 0; padding: 0; list-style: none; }
.lg-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.lg-toc a:hover { color: var(--violet); }
.lg-toc a.on { border-color: var(--violet); color: var(--ink); font-weight: 600; }

.lg-text { max-width: 700px; }
.lg-text section { scroll-margin-top: 100px; } /* clear of the floating menu */
.lg-text section + section { margin-top: 44px; }
.lg-text h2 { margin: 0 0 12px; font: 700 clamp(24px, 2.4vw, 28px)/1.2 var(--display); }
.lg-text p, .lg-text li, .lg-text dd { font-size: 17px; line-height: 1.7; color: #3E3858; }
.lg-text p { margin: 0 0 14px; }
.lg-text ul { margin: 0 0 14px; padding-left: 22px; }
.lg-text li + li { margin-top: 6px; }
.lg-text b { color: var(--ink); }
.lg-text a { color: var(--violet); text-underline-offset: 3px; }

.lg-perms { margin: 0; }
.lg-perms dt { margin-top: 18px; font-size: 17px; font-weight: 600; color: var(--ink); }
.lg-perms dd { margin: 4px 0 0; }

.lg-table { margin: 4px 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lg-table table { width: 100%; border-collapse: collapse; }
.lg-table th { padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lg-table td { padding: 14px 16px; vertical-align: top; font-size: 15px; line-height: 1.55; color: #3E3858; border-bottom: 1px solid var(--line); }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { color: var(--ink); font-weight: 600; width: 34%; }

@media (max-width: 1023px) { .legal { margin-bottom: 96px; } }

/* tablets and phones: no side contents; the text takes the width */
@media (max-width: 900px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { display: none; }
  .lg-text { max-width: none; }
}
@media (max-width: 640px) {
  .lg-short ul { grid-template-columns: minmax(0, 1fr); }
  /* each row of a table becomes a small card */
  .lg-table { border: 0; background: none; overflow: visible; }
  .lg-table thead { display: none; }
  .lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; width: auto; }
  .lg-table tr { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .lg-table td { padding: 4px 0; border: 0; }
  .lg-table td:first-child { width: auto; margin-bottom: 4px; }
  .lg-table td:nth-child(2)::before { content: "Where: "; font-weight: 600; color: var(--ink); }
  .lg-table td:nth-child(3)::before { content: "Why: "; font-weight: 600; color: var(--ink); }
}