.legal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.legal-home {
  color: #244bc1;
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 4px;
}
.legal-main {
  max-width: 960px;
  padding-top: 45px;
  padding-bottom: 90px;
}
.legal-kicker {
  margin: 0 0 15px;
  color: #244bc1;
  font:
    600 12px/1.5 'JetBrains Mono',
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-main h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}
.legal-intro {
  max-width: 750px;
  margin: 20px 0 0;
  color: #4e4e4e;
  font-size: 17px;
  line-height: 1.65;
}
.legal-warning {
  margin: 32px 0;
  padding: 19px 22px;
  border-left: 5px solid #244bc1;
  border-radius: 5px;
  background: #e5eaff;
  color: #243f98;
  font-size: 15px;
  line-height: 1.6;
}
.legal-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 45px;
}
.legal-jump a {
  color: #244bc1;
  font-weight: 600;
  text-underline-offset: 4px;
}
.legal-updated {
  margin: 22px 0 0;
  color: #666;
  font-size: 14px;
}
/* The operative single-language page. `.legal-language` sizes its h2 as a
   language heading, which is right for two notices side by side and far too
   large for eight short sections; this keeps the same measure, colour and
   rhythm with a heading scale that suits a page of them. */
.legal-body {
  margin-top: 45px;
  padding-top: 42px;
  border-top: 1px solid #d4d3cf;
}
.legal-body h2 {
  margin: 38px 0 10px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p,
.legal-body li {
  max-width: 780px;
  margin: 0 0 12px;
  color: #3c3c3c;
  font-size: 16px;
  line-height: 1.75;
}
.legal-body a {
  color: #244bc1;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-language {
  padding-top: 42px;
  border-top: 1px solid #d4d3cf;
}
.legal-language + .legal-language {
  margin-top: 55px;
}
.legal-language h2 {
  margin: 0 0 25px;
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 1.2;
}
.legal-language h3 {
  margin: 30px 0 8px;
  font-size: 19px;
  line-height: 1.4;
}
.legal-language p,
.legal-language li {
  max-width: 780px;
  margin: 0 0 12px;
  color: #3c3c3c;
  font-size: 16px;
  line-height: 1.75;
}
.legal-language a {
  color: #244bc1;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-language[dir='rtl'] {
  font-family: system-ui, sans-serif;
}
.legal-language[dir='rtl'] p,
.legal-language[dir='rtl'] li {
  line-height: 1.95;
}
/* A whole page in Arabic (the member app's /ar/app/ pages). The vendored
   Onest is a Latin subset, so Arabic letters already fall through the
   `Onest, system-ui` stack to the system face while the Latin names on the
   page (DravoFit, ZeptoMail) stay in Onest. Letter-spacing is reset because
   any tracking, positive or negative, pulls Arabic's joined letters apart, and
   the kicker's uppercase and monospace mean nothing in Arabic script. */
html[dir='rtl'] .legal-kicker,
html[dir='rtl'] .legal-main h1,
html[dir='rtl'] .legal-body h2 {
  letter-spacing: 0;
}
html[dir='rtl'] .legal-kicker {
  font:
    600 14px/1.5 system-ui,
    sans-serif;
  text-transform: none;
}
html[dir='rtl'] .legal-main h1 {
  line-height: 1.3;
}
html[dir='rtl'] .legal-warning {
  border-left: 0;
  border-right: 5px solid #244bc1;
}
/* The page's own numbers (its date) are Arabic-Indic, so its steps are too. */
html[dir='rtl'] .legal-body ol {
  list-style-type: arabic-indic;
}
html[dir='rtl'] .legal-body p,
html[dir='rtl'] .legal-body li,
html[dir='rtl'] .legal-intro {
  line-height: 1.95;
}
.legal-footer {
  padding-top: 24px;
  border-top: 1px solid #d4d3cf;
}
.legal-footer a {
  color: #244bc1;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .legal-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .legal-main {
    padding-top: 25px;
    padding-bottom: 60px;
  }
  .legal-warning {
    padding: 17px;
  }
  .legal-body {
    margin-top: 32px;
    padding-top: 32px;
  }
  .legal-language {
    padding-top: 32px;
  }
}