/* Long-form prose pages — the privacy policy and support (YLD-252).
   Lifted out of privacy.html when support.html needed the same treatment. Kept
   separate from styles.css so the marketing stylesheet stays about the landing
   page, which was the reason these lived inline in the first place. */

.legal { padding: 3rem 0 4rem; }
.legal h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0 0 .5rem; }
.legal .updated { color: var(--color-text-faint); font-family: var(--font-mono); font-size: .85rem; margin: 0 0 2.5rem; }
.legal h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }
.legal h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--color-accent); }
.legal p, .legal li { color: var(--color-text-dim); max-width: 68ch; }
.legal li { margin-bottom: .4rem; }
.legal strong { color: var(--color-text); }
.legal a { color: var(--color-accent); }
.legal .callout {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.legal .callout p { margin: 0; max-width: none; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.legal th { color: var(--color-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.legal td { color: var(--color-text-dim); }

/* Ordered steps someone follows on a phone while holding the phone the steps are
   about. Numbered rather than bulleted because the order is the instruction. */
.legal ol { color: var(--color-text-dim); max-width: 68ch; padding-left: 1.25rem; }
.legal ol li { margin-bottom: .6rem; }

/* Three columns of prose is unreadable on a phone even when it technically fits, so
   below tablet width each row becomes a stacked block with its own inline labels. */
@media (max-width: 700px) {
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tbody tr {
    display: block; margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border);
  }
  .legal tbody td { display: block; border: 0; padding: .15rem 0; }
  .legal tbody td:first-child { color: var(--color-text); font-weight: 600; font-size: 1rem; padding-bottom: .4rem; }
  .legal tbody td[data-label]::before {
    content: attr(data-label); display: block;
    color: var(--color-text-faint); font-size: .7rem; text-transform: uppercase;
    letter-spacing: .04em; margin-top: .5rem;
  }
}