.legal-dlg {
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #16181B;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
  overflow: hidden;
  font-family: var(--sans);
}
.legal-dlg::backdrop { background: rgba(22, 24, 27, .72); }
.legal-card { display: flex; flex-direction: column; max-height: inherit; }
.legal-head { display: flex; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid #DCDAD3; }
.legal-head h2 { flex: 1; margin: 0; font-size: 1.5rem; line-height: 1.25; }
.legal-x { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 1.5px solid #666; border-radius: 10px; background: transparent; color: #16181B; cursor: pointer; }
.legal-x:hover { border-color: #16181B; background: #F6F5F1; }
.legal-content { overflow: auto; overscroll-behavior: contain; padding: 28px; line-height: 1.6; }
.legal-content > :first-child { margin-top: 0; }
.legal-content > * + * { margin-top: 1rem; }
.legal-content h1 { font-size: 2rem; line-height: 1.15; }
.legal-content h3 { font-size: 1.25rem; line-height: 1.3; margin-top: 2rem; }
.legal-content h4 { font-size: 1.0625rem; line-height: 1.4; margin-top: 1.5rem; }
.legal-content a { color: #16181B; text-decoration-color: #FFCC10; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-dlg :focus-visible { outline: 2px solid #16181B; outline-offset: 2px; }
@media (max-width: 559px) {
  .legal-dlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .legal-head { padding: 12px 16px; }
  .legal-head h2 { font-size: 1.25rem; }
  .legal-content { padding: 20px 16px; }
  .legal-content h1 { font-size: 1.625rem; }
}