/* =========================================================
   LEGAL PAGE
========================================================= */

.legal-page {
  width:
    100%;

  background:
    var(--surface-primary);

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


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

.legal-hero {
  width:
    min(100% - 80px, 900px);

  margin:
    0 auto;

  padding:
    180px 0 80px;
}


/* =========================================================
   LEGAL KICKER
========================================================= */

.legal-kicker {
  margin-bottom:
    var(--space-md);

  color:
    var(--text-soft);

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-medium);

  letter-spacing:
    var(--tracking-wide);

  text-transform:
    uppercase;
}


/* =========================================================
   LEGAL TITLE
========================================================= */

.legal-title {
  max-width:
    10ch;

  margin-bottom:
    var(--space-lg);

  font-size:
    var(--headline-xl);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--line-tight);

  letter-spacing:
    var(--tracking-tight);
}


/* =========================================================
   LEGAL INTRO
========================================================= */

.legal-intro {
  max-width:
    52ch;

  color:
    var(--text-secondary);

  font-size:
    var(--text-lg);

  line-height:
    var(--line-loose);
}


/* =========================================================
   LEGAL CONTENT
========================================================= */

.legal-content {
  width:
    min(100% - 80px, 900px);

  margin:
    0 auto;

  padding-bottom:
    140px;

  display:
    grid;

  gap:
    72px;
}


/* =========================================================
   LEGAL BLOCK
========================================================= */

.legal-block {
  display:
    grid;

  gap:
    var(--space-md);
}


/* =========================================================
   LEGAL HEADLINE
========================================================= */

.legal-block h2 {
  font-size:
    clamp(1.4rem, 2vw, 2rem);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--line-tight);

  letter-spacing:
    var(--tracking-tight);
}


/* =========================================================
   LEGAL TEXT
========================================================= */

.legal-block p {
  max-width:
    65ch;

  color:
    var(--text-secondary);

  font-size:
    var(--text-md);

  line-height:
    var(--line-loose);
}


/* =========================================================
   LEGAL LINKS
========================================================= */

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

  text-decoration:
    none;

  border-bottom:
    1px solid transparent;

  transition:
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.legal-block a:hover {
  border-color:
    var(--text-primary);
}


/* =========================================================
   LEGAL SPACING
========================================================= */

.legal-block p + p {
  margin-top:
    var(--space-sm);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

  .legal-hero {
    width:
      calc(100% - 48px);

    padding:
      140px 0 64px;
  }

  .legal-content {
    width:
      calc(100% - 48px);

    gap:
      56px;

    padding-bottom:
      100px;
  }

  .legal-title {
    max-width:
      100%;
  }

}