
.cc--nkd {
    --cc-font-family: Arial, Helvetica, sans-serif;
    --cc-btn-primary-bg: #725c9a;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-hover-bg: #3b3742;
    --cc-btn-primary-hover-color: #fff;
    --cc-footer-bg: #725c9a;
    --cc-footer-color: #fff;

    #cc-main {
        * {
            border-radius: 0 !important;
        }

        .cm, .pm {
            border: 1px solid #51426D;
            box-shadow: 0 .625em 1.875em #51426D58;
        }

        .pm__service-icon {
            background-color: currentColor;
        }

        .cm__title {
            font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
            text-transform: uppercase;
        }

        .cm__footer {
            --cc-primary-color: #fff;

            a {
                font-weight: 400;
            }
        }

        .cm__btns, .pm__footer {
            --cc-btn-border-radius: 0;
        }

        .cm__btn, .pm__btn {
            text-transform: uppercase;
        }

        @media (max-width: 640px) {
            .cm__desc {
                text-align: center;
                padding: 0;
            }
        }
    }
}

#cc-main {
    .show-d {
        display: block;
    }
}

@media (min-width: 641px) {
    .show-m {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #cc-main {
        .show-d {
            display: none !important;
        }

        .cm__title, .cm__footer {
            display: none;
        }

        .cm__desc {
            margin: 0 !important;
        }

        .cm__btns {
            flex-direction: row !important;
            gap: 0.5em;
            .cm__btn-group {
                flex: auto;
                border-radius: var(--cc-btn-border-radius) !important;
                overflow: hidden;
                &, .cm__btn {
                    flex-direction: row !important;
                    min-width: auto !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    border-radius: 0;
                }

                + & > .cm__btn {
                    width: 0;
                }
            }
        }
    }
}


/*  */

.policy-doc {
  --acc: var(--cc-btn-primary-bg, #725c9a);
  --acc-soft: color-mix(in srgb, var(--acc) 10%, white);
  --line: #e4e9e8;
  margin: 0 auto;
  line-height: 1.6;
  color: #222;

  h1 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 4px;
  }

  .policy-updated {
    color: #777;
    margin: 0 0 18px;
  }

  .policy-controls {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;

    button {
      font: inherit;
      font-size: 14px;
      padding: 6px 14px;
      cursor: pointer;
      background: #fff;
      border: 1px solid var(--line);

      &:first-child {
        background: var(--acc);
        border-color: var(--acc);
        color: #fff;

        &:hover {
          filter: brightness(1.08);
        }
      }

      &:last-child:hover {
        border-color: var(--acc);
        color: var(--acc);
      }
    }
  }

  .policy-toc {
    background: #f6f9f8;
    border: 1px solid var(--line);
    padding: 14px 16px;
    margin: 0 0 18px;

    .policy-toc-title {
      font-weight: 600;
      margin: 0 0 10px;
    }

    .policy-toc-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;

      a {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 10px;
        border: 1px solid var(--line);
        background: #fff;
        color: #222;
        text-decoration: none;
        line-height: 1.35;
        cursor: pointer;
        text-transform: unset;

        &:hover {
          border-color: var(--acc);
          background: var(--acc-soft);
          color: var(--acc);
        }
      }

      .policy-toc-num {
        flex: none;
        min-width: 24px;
        height: 24px;
        padding: 0 4px;
        background: var(--acc);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
      }
    }
  }

  .policy-section {
    border: 1px solid var(--line);
    border-left: 3px solid var(--acc);
    margin: 0 0 10px;
    background: #fbfcfc;
    scroll-margin-top: 16px;

    & > summary {
      padding: 12px 16px;
      font-weight: 600;
      cursor: pointer;

      &:hover {
        background: var(--acc-soft);
      }
    }

    &[open] > summary {
      border-bottom: 1px solid var(--line);
    }

    .policy-section-body {
      padding: 2px 18px 14px;

      p {
        margin: .65em 0;
      }

      ul {
        margin: .65em 0;
        padding-left: 24px;
      }

      li {
        margin: .3em 0;
      }
    }

    .policy-basis {
      color: #555;
      font-size: 15px;
      margin: .35em 0 .9em;
    }
  }

  @media (max-width: 640px) {
    .policy-toc-cols {
      grid-template-columns: 1fr;
    }
  }

  @media print {
    .policy-toc,
    .policy-controls {
      display: none;
    }

    .policy-section {
      border: none;
      margin: 0;

      & > summary {
        padding-left: 0;
        list-style: none;

        &::marker {
          content: "";
        }
      }
    }

    details:not([open]) > *:not(summary) {
      display: block;
    }
  }
}