/* Policy pages: terms, privacy, shipping, returns.
   One sheet for all four — they share $PAGE_SLUG = 'legal'.

   These pages exist to be read, and usually to be searched for one specific
   paragraph by someone who is mid-problem. So the type is set wider and looser
   than the marketing pages, the measure is capped near 70 characters, and the
   headings are heavy enough to scan against without breaking the column. */

.legal {
  padding: 64px 24px 96px;
  background: var(--white);
}
.legal-inner {
  max-width: 46rem;          /* ~70ch at this size, the comfortable reading limit */
  margin: 0 auto;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin-bottom: 18px;
}
.legal-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.legal-updated {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-gray);
  margin-bottom: 40px;
}
/* Without a date the intro would sit flush against the first heading. */
.legal-intro:last-of-type { margin-bottom: 40px; }

.legal-section { margin-bottom: 36px; }

/* Scroll margin so linking to a section does not tuck its heading under the
   sticky site header. */
.legal-section h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
  scroll-margin-top: 96px;
}
.legal-section p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--charcoal);
}

.legal-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-gray);
}
.legal-foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-foot a:hover { color: var(--charcoal); }

@media (max-width: 767px) {
  .legal { padding: 40px 20px 64px; }
  .legal-intro { font-size: 17px; }
  .legal-section { margin-bottom: 30px; }
  .legal-updated { margin-bottom: 32px; }
  .legal-intro:last-of-type { margin-bottom: 32px; }
}

/* Printing a policy is a real thing customers do when there is a dispute, so
   the page furniture comes off and the links resolve to something readable. */
@media print {
  .legal { padding: 0; }
  .legal-foot { display: none; }
  .legal-section { page-break-inside: avoid; }
}