.legal-dialog {
  width: min(900px, calc(100% - 32px));
  max-width: none;
  max-height: min(85dvh, 900px);
  padding: 0;
  border: 1px solid #514069;
  border-radius: 20px;
  background: #f8f7fb;
  color: #171523;
  color-scheme: light;
  box-shadow: 0 24px 90px #0008;
  overflow: auto;

  &::backdrop {
    background: #080610cc;
    backdrop-filter: blur(6px);
  }

  .legal-dialog-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    background: #f8f7fb;
    border-bottom: 1px solid #e5e0ec;

    h2 {
      margin: 0;
      font-size: clamp(1.3rem, 3vw, 2rem);
      line-height: 1.25;
      letter-spacing: -0.025em;
    }

    button {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid #d9d1e5;
      border-radius: 50%;
      background: transparent;
      color: #342644;
      font-size: 1.7rem;
      cursor: pointer;
      align-content: center;
      padding-bottom: 0.25em;

      &:hover {
        background: #eee8f6;
      }
    }
  }

  .legal-dialog-body {
    padding: 32px;
    line-height: 1.75;

    h2,
    h3,
    h4 {
      margin-top: 32px;
      margin-bottom: 12px;
      line-height: 1.3;
      letter-spacing: -0.02em;
    }

    h3 {
      font-size: 1.35rem;
    }

    h4 {
      font-size: 1.1rem;
    }

    p,
    li {
      color: #514b5c;
    }

    p {
      max-width: none;
      margin-bottom: 16px;
    }

    ul,
    ol {
      padding-left: 24px;
      margin-bottom: 20px;
    }

    li {
      margin-bottom: 8px;
    }

    a {
      color: #6532b6;
      text-decoration: underline;
      text-underline-offset: 3px;

      &:hover {
        color: #472080;
      }
    }

    hr {
      border: 0;
      border-top: 1px solid #e5e0ec;
      margin-block: 24px;
    }
  }

  @media (max-width: 640px) {
    width: calc(100% - 20px);
    max-height: 90dvh;
    border-radius: 14px;

    .legal-dialog-header {
      padding: 18px;

      button {
        width: 36px;
        height: 36px;
      }
    }

    .legal-dialog-body {
      padding: 20px;
    }
  }
}