/* =========================================================
       HERO
    ========================================================== */

    .legal-hero {
      position: relative;
      min-height: 470px;
      padding: 175px 9vw 90px;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    .legal-hero-grid {
      position: absolute;
      inset: 0;

      background-image:
        linear-gradient(
          rgba(80, 150, 220, .045) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(80, 150, 220, .045) 1px,
          transparent 1px
        );

      background-size: 70px 70px;

      mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
      );

      pointer-events: none;
    }

    .legal-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .legal-orb-a {
      width: 520px;
      height: 520px;
      right: -100px;
      top: -180px;

      background: radial-gradient(
        circle,
        rgba(32, 119, 255, .20),
        transparent 67%
      );
    }

    .legal-orb-b {
      width: 300px;
      height: 300px;
      left: -150px;
      bottom: -180px;

      background: radial-gradient(
        circle,
        rgba(20, 105, 210, .14),
        transparent 70%
      );
    }

    .legal-hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
    }

    .legal-status {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      border: 1px solid var(--line);
      background: rgba(9, 23, 40, .65);

      padding: 8px 12px;
      border-radius: 99px;

      color: #9db2c8;
      font-size: 10px;
      letter-spacing: .09em;

      margin-bottom: 25px;
    }

    .legal-status i {
      color: var(--cyan);
      font-size: 9px;
    }

    .legal-eyebrow {
      font-size: 11px;
      letter-spacing: .19em;
      color: #62bfff;
      font-weight: 800;
      margin: 0 0 16px;
    }

    .legal-hero h1 {
      font-family: "Space Grotesk";
      font-size: clamp(55px, 8vw, 112px);
      line-height: .84;
      letter-spacing: -.075em;
      margin: 0;
      font-weight: 700;
    }

    .legal-hero h1 span {
      color: transparent;
      -webkit-text-stroke: 1px rgba(220, 239, 255, .7);
    }

    .legal-hero h1 .dot {
      color: var(--cyan);
      -webkit-text-stroke: 0;
    }

    .legal-hero-description {
      max-width: 690px;
      color: #8ea2b7;
      line-height: 1.75;
      font-size: 14px;
      margin: 30px 0 0;
    }

    .legal-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 27px;
      flex-wrap: wrap;
    }

    .legal-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      padding: 10px 13px;

      border: 1px solid var(--line);
      border-radius: 10px;

      background: rgba(8, 19, 32, .72);

      color: #6f849a;
      font-size: 10px;
    }

    .legal-meta-item i {
      color: var(--cyan);
    }

    .legal-meta-item strong {
      color: #cbd8e5;
      font-weight: 700;
    }


    /* =========================================================
       LEGAL LAYOUT
    ========================================================== */

    .legal-section {
      padding: 110px 9vw 130px;
    }

    .legal-layout {
      display: grid;
      grid-template-columns: 245px minmax(0, 1fr);
      gap: 60px;
      align-items: start;
    }


    /* =========================================================
       SIDEBAR
    ========================================================== */

    .legal-sidebar {
      position: sticky;
      top: 105px;
    }

    .legal-sidebar-label {
      font-size: 9px;
      letter-spacing: .18em;
      color: #526b82;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .legal-sidebar nav {
      display: grid;
      gap: 6px;
    }

    .legal-sidebar a {
      display: flex;
      align-items: center;
      gap: 11px;

      padding: 12px 13px;

      border: 1px solid transparent;
      border-radius: 11px;

      color: #73899e;
      font-size: 11px;
      font-weight: 700;

      transition: .25s;
    }

    .legal-sidebar a span {
      color: #43596e;
      font-family: "Space Grotesk";
      font-size: 10px;
    }

    .legal-sidebar a:hover,
    .legal-sidebar a.active {
      color: #e6f2ff;
      background: rgba(45, 140, 255, .07);
      border-color: rgba(74, 166, 255, .16);
    }

    .legal-sidebar a:hover span,
    .legal-sidebar a.active span {
      color: var(--cyan);
    }

    .legal-sidebar-note {
      margin-top: 30px;

      padding: 16px;

      border: 1px solid var(--line);
      border-radius: 14px;

      background: rgba(8, 19, 32, .65);
    }

    .legal-sidebar-note i {
      color: var(--cyan);
      font-size: 15px;
      margin-bottom: 10px;
    }

    .legal-sidebar-note strong {
      display: block;
      color: #dbe8f5;
      font-size: 11px;
      margin-bottom: 6px;
    }

    .legal-sidebar-note p {
      color: #637b91;
      font-size: 10px;
      line-height: 1.6;
      margin: 0;
    }


    /* =========================================================
       DOCUMENT
    ========================================================== */

    .legal-document {
      min-width: 0;
    }

    .legal-document-header {
      margin-bottom: 50px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .legal-document-header .eyebrow {
      margin-bottom: 13px;
    }

    .legal-document-header h2 {
      font-family: "Space Grotesk";
      font-size: clamp(34px, 4vw, 55px);
      line-height: .95;
      letter-spacing: -.055em;
      margin: 0 0 15px;
    }

    .legal-document-header h2 span {
      color: #79c9ff;
    }

    .legal-document-header p {
      max-width: 720px;
      margin: 0;

      color: #71869b;
      font-size: 13px;
      line-height: 1.75;
    }


    /* =========================================================
       DOCUMENT BLOCKS
    ========================================================== */

    .legal-block {
      scroll-margin-top: 105px;
      margin-bottom: 90px;
    }

    .legal-block:last-child {
      margin-bottom: 0;
    }

    .legal-block-heading {
      display: flex;
      align-items: flex-start;
      gap: 18px;

      margin-bottom: 38px;
    }

    .legal-block-number {
      flex-shrink: 0;

      display: grid;
      place-items: center;

      width: 43px;
      height: 43px;

      border: 1px solid rgba(74, 166, 255, .22);
      border-radius: 12px;

      background: rgba(45, 140, 255, .07);

      color: #62bfff;
      font: 700 11px "Space Grotesk";
    }

    .legal-block-heading small {
      display: block;

      color: #62bfff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;

      margin-bottom: 8px;
    }

    .legal-block-heading h3 {
      margin: 0;

      color: #f0f6fc;
      font: 700 clamp(25px, 3vw, 38px) "Space Grotesk";
      letter-spacing: -.04em;
      line-height: 1;
    }


    /* =========================================================
       ARTICLES
    ========================================================== */

    .legal-article {
      margin-bottom: 34px;
    }

    .legal-article:last-child {
      margin-bottom: 0;
    }

    .legal-article h4 {
      display: flex;
      align-items: baseline;
      gap: 9px;

      margin: 0 0 11px;

      color: #dce9f5;
      font: 700 16px "Space Grotesk";
      letter-spacing: -.015em;
    }

    .legal-article h4 span {
      color: #4d6a83;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .05em;
    }

    .legal-article p {
      max-width: 820px;

      margin: 0 0 11px;

      color: #8196aa;
      font-size: 13px;
      line-height: 1.82;
    }

    .legal-article p:last-child {
      margin-bottom: 0;
    }

    .legal-article ul {
      max-width: 820px;

      margin: 12px 0 0;
      padding-left: 20px;

      color: #8196aa;

      font-size: 13px;
      line-height: 1.82;
    }

    .legal-article li {
      padding-left: 4px;
      margin-bottom: 5px;
    }

    .legal-article li::marker {
      color: #4aa8e8;
    }

    .legal-article strong {
      color: #b9ccdd;
      font-weight: 700;
    }


    /* =========================================================
       IMPORTANT BOX
    ========================================================== */

    .legal-notice {
      position: relative;

      margin: 28px 0 38px;
      padding: 20px 21px 20px 22px;

      border: 1px solid rgba(74, 166, 255, .18);
      border-radius: 15px;

      background:
        radial-gradient(
          circle at 100% 0%,
          rgba(45, 140, 255, .10),
          transparent 45%
        ),
        rgba(8, 19, 32, .72);
    }

    .legal-notice::before {
      content: "";

      position: absolute;
      left: 0;
      top: 16px;
      bottom: 16px;

      width: 2px;

      border-radius: 99px;

      background: var(--cyan);
    }

    .legal-notice-title {
      display: flex;
      align-items: center;
      gap: 9px;

      color: #cde7fa;

      font-size: 11px;
      font-weight: 800;

      margin-bottom: 7px;
    }

    .legal-notice-title i {
      color: var(--cyan);
    }

    .legal-notice p {
      margin: 0;

      color: #7890a5;
      font-size: 11px;
      line-height: 1.7;
    }


    /* =========================================================
       CONTACT CARD
    ========================================================== */

    .legal-contact {
      margin-top: 50px;

      padding: 28px;

      border: 1px solid rgba(74, 166, 255, .20);
      border-radius: 17px;

      background:
        radial-gradient(
          circle at 90% 20%,
          rgba(35, 135, 255, .13),
          transparent 40%
        ),
        #081422;
    }

    .legal-contact-label {
      color: #62bfff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;

      margin-bottom: 10px;
    }

    .legal-contact h4 {
      margin: 0 0 8px;

      color: #edf6ff;
      font: 700 24px "Space Grotesk";
    }

    .legal-contact p {
      margin: 0;

      max-width: 600px;

      color: #748ba0;
      font-size: 12px;
      line-height: 1.7;
    }

    .legal-contact-details {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      margin-top: 18px;
    }

    .legal-contact-details span {
      padding: 9px 11px;

      border: 1px solid var(--line);
      border-radius: 9px;

      color: #8fa5b9;
      font-size: 10px;

      background: rgba(5, 11, 20, .45);
    }


    /* =========================================================
       LEGAL DIVIDER
    ========================================================== */

    .legal-divider {
      height: 1px;
      margin: 85px 0;

      background:
        linear-gradient(
          90deg,
          transparent,
          var(--line),
          transparent
        );
    }


    /* =========================================================
       BACK TO TOP
    ========================================================== */

    .legal-top {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      margin-top: 50px;

      color: #607991;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;

      transition: .25s;
    }

    .legal-top:hover {
      color: #8fd4ff;
      transform: translateY(-2px);
    }


    /* =========================================================
       MOBILE
    ========================================================== */

    @media (max-width: 900px) {

      .legal-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .legal-sidebar {
        position: relative;
        top: auto;
      }

      .legal-sidebar nav {
        grid-template-columns: repeat(3, 1fr);
      }

      .legal-sidebar-note {
        display: none;
      }

    }


    @media (max-width: 760px) {

      .legal-hero {
        min-height: 440px;
        padding: 145px 6vw 75px;
      }

      .legal-hero h1 {
        font-size: clamp(55px, 17vw, 92px);
      }

      .legal-hero-description {
        font-size: 13px;
      }

      .legal-meta {
        flex-direction: column;
        align-items: stretch;
      }

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

      .legal-section {
        padding: 80px 6vw 90px;
      }

      .legal-sidebar nav {
        grid-template-columns: 1fr;
      }

      .legal-sidebar a {
        padding: 11px 12px;
      }

      .legal-document-header {
        margin-bottom: 40px;
      }

      .legal-block {
        margin-bottom: 70px;
      }

      .legal-block-heading {
        gap: 13px;
      }

      .legal-block-number {
        width: 38px;
        height: 38px;
      }

      .legal-article h4 {
        font-size: 15px;
      }

      .legal-article p,
      .legal-article ul {
        font-size: 12px;
      }

      .legal-contact {
        padding: 22px;
      }

    }