/* The privacy notice: one measure of running text in the landing's look; tables become cards on a phone. */

/* site.css caps p at --measure; the same cap on the block keeps lists and tables on that one measure. */
.notice { max-width: var(--measure); padding-block: clamp(24px, 4vw, 56px) clamp(48px, 8vw, 96px); }
.notice h1 { margin-bottom: .5em; }
.notice h2 { margin-top: 2em; margin-bottom: .6em; }
.notice p { margin-top: 1em; }
.notice h1 + p { margin-top: 0; color: var(--ink-2); font-size: .9rem; }
.notice ul, .notice ol { margin-top: 1em; padding-left: 1.4em; }
.notice li + li { margin-top: .6em; }
.notice li { text-wrap: pretty; }
.notice hr { border: 0; border-top: 1px solid var(--rule-strong); margin-block: 3em; }
.notice strong { font-weight: 700; }

.notice table { margin-top: 1em; width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.4; }
.notice th, .notice td { text-align: left; vertical-align: top; padding: .55em .6em .55em 0; border-top: 1px solid var(--rule); }
.notice th { font-weight: 700; border-top: 0; }
.notice td + td, .notice th + th { padding-left: .8em; }

@media (max-width: 640px) {
  .notice thead { display: none; }
  .notice table, .notice tbody, .notice tr, .notice td { display: block; }
  .notice tr { background: var(--paper); border-radius: var(--r-paper); padding: 10px 14px; }
  .notice tr + tr { margin-top: 10px; }
  .notice td, .notice td + td { padding: .3em 0; border: 0; }
  /* The column's name from the row's data-h, as the head row would have shown it. */
  .notice td::before { content: attr(data-h); display: block; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
}