@layer pages {
  /* ================================================================ Page head
     Same pattern as calculator and contacts pages. */
  .page-head {
    padding-top: var(--space-l);
  }

  .page-head__title {
    margin-top: var(--space-m);
  }

  .legal__title {
    max-width: 22ch;
  }

  /* ================================================================ Layout: text column + documents nav */
  .legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    align-items: start;
    gap: var(--space-xl) var(--space-3xl);
    margin-top: var(--space-xl);
  }

  .legal__body {
    min-width: 0;
    max-width: var(--text-max);
  }

  .legal__nav {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-l));
  }

  .legal__nav-title {
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: normal;
    color: var(--ink-2);
  }

  .legal__nav ul {
    display: grid;
    gap: 0.125rem;
    margin-top: var(--space-2xs);
  }

  .legal__nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-s);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--dur-fast) ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .legal__nav a:hover {
      background: var(--surface-2);
    }
  }

  .legal__nav a[aria-current] {
    background: var(--navy-tint);
    font-weight: 700;
  }

  /* ================================================================ Document (legacy HTML: nested ol/ul)
     Top-level items are section titles; their child items are numbered 1.1, 1.2… */
  .legal-doc {
    font-size: var(--fs-body-l);
    line-height: 1.6;
    color: var(--ink-2);
    overflow-wrap: break-word;
  }

  .legal-doc > ol,
  .legal-doc > ol > li > ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .legal-doc > ol {
    counter-reset: legal-section;
  }

  .legal-doc > ol > li {
    counter-increment: legal-section;
    margin-top: var(--space-2xl);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy);
    text-wrap: balance;
  }

  .legal-doc > ol > li:first-child {
    margin-top: 0;
  }

  .legal-doc > ol > li::before {
    content: counter(legal-section) ". ";
    font-variant-numeric: tabular-nums lining-nums;
  }

  .legal-doc > ol > li > ol {
    counter-reset: legal-item;
    margin-top: var(--space-s);
    font-size: var(--fs-body-l);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }

  .legal-doc > ol > li > ol > li {
    counter-increment: legal-item;
    position: relative;
    padding-left: 3.25rem;
  }

  .legal-doc > ol > li > ol > li + li {
    margin-top: 0.75em;
  }

  .legal-doc > ol > li > ol > li::before {
    content: counter(legal-section) "." counter(legal-item) ".";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .legal-doc ul,
  .legal-doc li ol ol,
  .legal-doc ul ol {
    margin-top: 0.5em;
    padding-left: 1.25em;
  }

  .legal-doc ul {
    list-style: disc;
  }

  .legal-doc ul ul {
    list-style: circle;
  }

  .legal-doc ul > li + li,
  .legal-doc li ol ol > li + li {
    margin-top: 0.35em;
  }

  .legal-doc ul > li::marker {
    color: var(--ink-3);
  }

  /* The three documents are lists of paragraphs, so a long one never meets the sanitiser's
     length cut. A paragraph whose whole content is bold is a section heading, and is set like
     the numbered headings of the old nested-list markup above. */
  .legal-doc > p {
    margin: 0 0 var(--space-s);
  }

  /* A list between paragraphs (the offer's anti-fraud section, Uzum Bank's wording) is spaced
     as one: without this the next paragraph sat against its last item. */
  .legal-doc > ul {
    margin: 0 0 var(--space-s);
  }

  .legal-doc > p:has(> strong:only-child) {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-h4);
    line-height: 1.3;
    color: var(--navy);
    text-wrap: balance;
  }

  .legal-doc > p:first-child:has(> strong:only-child) {
    margin-top: 0;
  }

  .legal-doc strong {
    color: var(--navy);
  }

  .legal-doc a {
    color: var(--blue);
    font-weight: 600;
    text-decoration-color: rgb(34 79 242 / 0.35);
  }

  .legal-doc a:hover {
    text-decoration-color: currentColor;
  }

  /* ================================================================ Documents not published yet */
  .legal-pending {
    display: grid;
    gap: var(--space-m);
  }

  .legal-pending__text {
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--navy);
  }

  .legal-pending__questions {
    font-size: var(--fs-body-l);
    color: var(--ink-2);
  }

  .legal-pending__contacts {
    display: grid;
    justify-items: start;
    gap: var(--space-s);
    padding: var(--space-l);
    border-radius: var(--r-l);
    background: var(--surface-2);
  }

  .legal-pending__company {
    font-size: var(--fs-body-l);
    font-weight: 700;
  }

  .legal-pending__list {
    display: grid;
    gap: var(--space-s);
  }

  .legal-pending__list > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-s);
  }

  .legal-pending__list dt {
    font-weight: 700;
    color: var(--ink-2);
  }

  .legal-pending__list dd {
    margin: 0;
  }

  .legal-pending__list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-weight: 700;
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .legal-pending__list a:hover {
      text-decoration: underline;
    }
  }

  /* ================================================================ Responsive */
  @media (max-width: 64rem) {
    .legal {
      grid-template-columns: minmax(0, 1fr);
    }

    .legal__nav {
      position: static;
      padding-top: var(--space-l);
      border-top: 2px solid var(--line);
    }
  }

  @media (max-width: 36rem) {
    .legal {
      margin-top: var(--space-l);
    }

    .legal-doc > ol > li > ol > li {
      padding-left: 2.75rem;
    }

    .legal-pending__contacts {
      padding: var(--space-m) var(--space-s);
    }

    .legal-pending__list > div {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}