:root {
  --accent: #395596;
  --accent-edge: #7FB2E5;
  --accent-soft: #F0F6FF;
  --accent-hover: #18264B;
  --surface: #FFFFFF;
  --surface2: #F3F6FD;
  --border: #D7ECFF;
  --text: #18264B;
  --text2: #46557A;
  --text3: #6F7C9B;
}

.top-legal { padding-bottom: 8px; }

main.legal { display: block; max-width: 792px; margin: 0 auto; padding: 56px var(--gutter) 16px; }
.legal h1 { font-size: clamp(32px, 4.2vw, 46px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.legal .updated { margin: 14px 0 36px; color: var(--blue); font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: .01em; }
.legal h2 { margin: 44px 0 14px; font-size: clamp(21px, 2.2vw, 25px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
.legal h3 { margin: 28px 0 10px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.legal h4 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; color: var(--navy); }
.legal p, .legal li { color: var(--text2); font-size: 16.5px; line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 24px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 8px; padding-left: 4px; }
.legal li::marker { color: var(--blue); }
.legal a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(57, 85, 150, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: currentColor; }
.legal strong { color: var(--navy); font-weight: 600; }
.legal em { font-style: italic; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--tint); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.legal .num { font-variant-numeric: tabular-nums; }
.legal .bg-surface { background: var(--soft); }
.legal .bg-surface p:last-child { margin-bottom: 0; }
.legal details > summary h2 { display: inline; }

@media (max-width: 600px) {
  main.legal { padding-top: 36px; }
  .legal .updated { margin-bottom: 28px; }
  .legal h2 { margin-top: 36px; }
  .legal p, .legal li { font-size: 16px; line-height: 1.65; }
}