.policy-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px var(--pad);
  font-size: 14px;
}
.policy-header > a:last-child { text-align: right; }
.policy {
  max-width: 840px;
  margin: 48px auto 96px;
  padding: 0 var(--pad);
  overflow-wrap: anywhere;
}
.policy .display { font-size: clamp(48px, 8vw, 88px); }
.policy-intro { color: var(--fg-2); margin: 24px 0 56px; }
main.policy > section { padding: 0; max-width: none; margin: 40px 0 0; }
.policy h2 { font: 700 28px/1.15 var(--display); margin: 0 0 16px; }
.policy section p { margin: 0; color: var(--fg-2); line-height: 1.7; }
.policy a { text-underline-offset: 4px; }
@media (max-width: 480px) {
  .policy-header { gap: 16px; }
  .policy-header > a:last-child { max-width: 110px; }
  .policy { margin-top: 32px; }
}

/* In the app (legal.js): the document alone, on the sheet's own colour, with
   its text scaled as the app's is. legal.js turns its links into text, since
   the app keeps the sheet on this page. */
:root[data-embed="app"] body::before,
:root[data-embed="app"] .skip,
:root[data-embed="app"] .policy-header,
:root[data-embed="app"] .policy .display,
:root[data-embed="app"] .footer { display: none; }
:root[data-embed="app"] .policy {
  margin: 0 auto;
  padding: 0 24px 40px;
  zoom: var(--text-scale, 1);
}
:root[data-embed="app"] .policy-intro { margin: 16px 0 0; }
:root[data-embed="app"] main.policy > section { margin-top: 32px; }
:root[data-embed="app"] .policy h2 { font-size: 24px; margin-bottom: 8px; }
:root[data-embed="app"] .policy a {
  color: inherit;
  text-decoration: none;
}