@layer pages.legal {
  .legal-page {
    position: relative;
    overflow: clip;
  }

  .legal-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(circle at 22% 12%, rgb(var(--cz-accent-rgb) / 0.2), transparent 30rem),
      radial-gradient(circle at 82% 18%, rgb(var(--cz-accent-2-rgb) / 0.13), transparent 28rem);
  }

  .legal-hero {
    padding-block: clamp(4rem, 8vw, 7rem) var(--cz-space-2xl);
  }

  .legal-hero .cz-container {
    display: grid;
    gap: var(--cz-space-lg);
  }

  .legal-hero h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: -0.075em;
  }

  .legal-hero p {
    max-width: 72ch;
    font-size: var(--cz-body-lg);
  }

  .legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .legal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-radius-pill);
    background: rgb(255 255 255 / 0.045);
    color: var(--cz-text-soft);
    font-size: var(--cz-small);
    font-weight: 750;
  }

  .legal-meta i {
    color: #c9adff;
  }

  .legal-content-section {
    padding-block: 0 var(--cz-space-3xl);
  }

  .legal-layout {
    display: grid;
    gap: var(--cz-space-xl);
    align-items: start;
  }

  .legal-sidebar {
    display: none;
  }

  .legal-card {
    display: grid;
    gap: var(--cz-space-xl);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-radius-xl);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.022)), rgb(16 23 34 / 0.72);
    box-shadow: var(--cz-shadow-card);
  }

  .legal-block {
    display: grid;
    gap: var(--cz-space-md);
    scroll-margin-block-start: calc(var(--cz-header-h) + var(--cz-space-xl));
  }

  .legal-block + .legal-block {
    padding-block-start: var(--cz-space-xl);
    border-block-start: 1px solid var(--cz-border-soft);
  }

  .legal-block h2 {
    font-size: clamp(1.6rem, 4vw, 2.45rem);
  }

  .legal-block h3 {
    margin-block-start: var(--cz-space-sm);
    font-size: clamp(1.18rem, 2.4vw, 1.45rem);
  }

  .legal-block p,
  .legal-block li {
    color: var(--cz-text-soft);
  }

  .legal-block ul {
    display: grid;
    gap: 0.7rem;
    padding-inline-start: 1.15rem;
  }

  .legal-block a {
    color: var(--cz-accent-soft);
    text-decoration: underline;
    text-decoration-color: rgb(var(--cz-accent-2-rgb) / 0.38);
    text-underline-offset: 0.22em;
  }

  @media (min-width: 980px) {
    .legal-layout {
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .legal-sidebar {
      position: sticky;
      inset-block-start: calc(var(--cz-header-h) + var(--cz-space-lg));
      display: grid;
      gap: var(--cz-space-md);
      padding: 1rem;
      border: 1px solid var(--cz-border);
      border-radius: var(--cz-radius-lg);
      background: rgb(255 255 255 / 0.045);
    }

    .legal-sidebar strong {
      font-size: var(--cz-small);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .legal-sidebar nav {
      display: grid;
      gap: 0.25rem;
    }

    .legal-sidebar a {
      padding: 0.45rem 0.55rem;
      border-radius: var(--cz-radius-sm);
      color: var(--cz-text-muted);
      font-size: var(--cz-small);
      font-weight: 750;
      transition:
        background var(--cz-duration-fast) var(--cz-ease),
        color var(--cz-duration-fast) var(--cz-ease),
        transform var(--cz-duration-fast) var(--cz-ease);
    }

    .legal-sidebar a:hover {
      transform: translateX(0.15rem);
      background: rgb(var(--cz-accent-rgb) / 0.14);
      color: var(--cz-accent-soft);
    }
  }

  @media (max-width: 700px) {
    .legal-hero h1 {
      font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .legal-meta span {
      width: 100%;
    }
  }
}

.legal-sidebar a.is-active {
  color: #fff;
  text-decoration: none;
  background: rgb(var(--cz-accent-rgb) / 0.18);
  box-shadow:
    inset 0 0 0 1px rgb(var(--cz-accent-2-rgb) / 0.35),
    0 10px 26px rgb(var(--cz-accent-rgb) / 0.14);
}

.legal-sidebar a.is-active:hover {
  color: #fff;
}