/* ============================================================
   STI ASSETS MANAGEMENT
   LEGAL PAGES
============================================================ */


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

.legal-page-hero {
  --hero-bg-image:
    url(
      "/heropic.png"
    );
}

.legal-page-hero
  .inner-page-hero-inner {
  width: 100%;
  max-width: 820px;
}

.legal-page-hero p {
  max-width: 650px;
}

/* ============================================================
   LEGAL HERO ENTRANCE
============================================================ */

.legal-page-hero
  .hero-eyebrow {
  animation:
    legal-hero-enter 620ms
    cubic-bezier(0.22, 1, 0.36, 1)
    80ms both;
}

.legal-page-hero h1 {
  animation:
    legal-hero-enter 680ms
    cubic-bezier(0.22, 1, 0.36, 1)
    160ms both;
}

.legal-page-hero p {
  animation:
    legal-hero-enter 680ms
    cubic-bezier(0.22, 1, 0.36, 1)
    240ms both;
}

@keyframes legal-hero-enter {

  from {
    opacity: 0;

    transform:
      translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;

    transform:
      translate3d(0, 0, 0);
  }

}


@media (prefers-reduced-motion: reduce) {

  .legal-page-hero
    .hero-eyebrow,

  .legal-page-hero h1,

  .legal-page-hero p {
    animation: none;
  }

}
/* ============================================================
   LEGAL CONTENT SECTION
============================================================ */

.legal-section {
  width: 100%;

  padding:
    clamp(68px, 8vw, 96px)
    20px
    clamp(84px, 9vw, 116px);

  background:
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #ffffff 180px
    );
}

.legal-shell {
  width: 100%;
  max-width: var(--max-width);

  margin: 0 auto;
}

.legal-content {
  width: 100%;
  max-width: 820px;

  margin: 0 auto;

  color:
    var(--color-text);

  font-size:
    clamp(0.96rem, 1.3vw, 1rem);

  line-height: 1.82;

  overflow-wrap: anywhere;
}
/* ============================================================
   LEGAL PARAGRAPHS
============================================================ */

.legal-content p {
  margin:
    0 0 20px;

  color:
    var(--color-text-muted);
}

.legal-content > p:first-child {
  margin-bottom:
    clamp(36px, 5vw, 46px);

  color:
    var(--color-text);

  font-size:
    clamp(1rem, 1.5vw, 1.06rem);

  line-height: 1.85;
}
/* ============================================================
   LEGAL SECTION HEADINGS
============================================================ */

.legal-content h2 {
  margin:
    clamp(46px, 6vw, 58px)
    0
    18px;

  padding-top: 2px;

  color:
    var(--color-primary);

  font-size:
    clamp(1.35rem, 2.3vw, 1.65rem);

  font-weight: 800;
  line-height: 1.3;

  letter-spacing:
    -0.02em;

  text-wrap: pretty;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}
/* ============================================================
   LEGAL LISTS
============================================================ */

.legal-content ul {
  display: grid;

  gap: 10px;

  margin:
    4px 0 26px;

  padding-left: 0;

  list-style: none;
}

.legal-content li {
  position: relative;

  padding-left: 22px;

  color:
    var(--color-text-muted);

  line-height: 1.75;
}

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

  position: absolute;

  top: 0.78em;
  left: 2px;

  width: 6px;
  height: 6px;

  background:
    var(--color-accent);

  border-radius: 50%;

  transform:
    translateY(-50%);
}
.legal-content h2:not(:first-of-type) {
  position: relative;
}

.legal-content h2:not(:first-of-type)::before {
  content: "";

  position: absolute;

  top:
    calc(
      clamp(46px, 6vw, 58px) * -0.48
    );

  left: 0;

  width: 100%;

  height: 1px;

  background:
    rgba(3, 54, 105, 0.08);
}
/* ============================================================
   LEGAL LINKS
============================================================ */

.legal-content a {
  color:
    var(--color-primary);

  font-weight: 650;

  text-decoration:
    underline;

  text-decoration-color:
    rgba(246, 134, 52, 0.65);

  text-decoration-thickness: 1px;

  text-underline-offset: 4px;

  transition:
    color 220ms ease;
}

@media (hover: hover) {

  .legal-content a:hover {
    color:
      var(--color-primary);
  }

}
/* ============================================================
   LEGAL MOBILE
============================================================ */

@media (max-width: 767px) {

  .legal-section {
    padding:
      58px 16px
      76px;
  }

  .legal-content {
    font-size: 0.94rem;

    line-height: 1.78;
  }

  .legal-content > p:first-child {
    margin-bottom: 34px;
  }

  .legal-content h2 {
    margin-top: 42px;

    font-size: 1.3rem;
  }

  .legal-content ul {
    gap: 9px;
  }

}


@media (max-width: 360px) {

  .legal-section {
    padding-right: 14px;
    padding-left: 14px;
  }

}
/* ============================================================
   LEGAL SCROLL REVEALS
============================================================ */

.legal-reveal {
  opacity: 0;

  translate:
    0 16px;

  transition:
    opacity 620ms
      cubic-bezier(0.22, 1, 0.36, 1),

    translate 620ms
      cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay:
    var(--reveal-delay, 0ms);

  will-change:
    opacity,
    translate;
}

.legal-reveal.is-visible {
  opacity: 1;

  translate:
    0 0;
}
/* ============================================================
   LEGAL REVEAL REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .legal-reveal {
    opacity: 1;

    translate: none;

    transition: none;

    will-change: auto;
  }

}