/* Presence Bell - Privacy, Terms, Support and 404 pages.
   Loaded after homepage.css, which provides the tokens, header, footer, buttons and FAQ list. */

.legal {
  display:grid;
  grid-template-columns:.85fr 1.2fr;
  gap:100px;
  align-items:start;
  padding-block:96px 110px
}
.legal-head {
  position:sticky;
  top:124px
}
.legal-head h1 {
  margin-top:0;
  font-size:clamp(44px,4.6vw,58px);
  line-height:1.08;
  letter-spacing:-1.8px
}
.legal-date {
  margin-top:18px;
  font-size:13px;
  color:var(--muted)
}
.legal-lead {
  margin-top:26px;
  max-width:400px;
  font-size:16px;
  line-height:1.85;
  color:var(--muted)
}
.legal-section {
  padding-block:30px;
  border-top:1px solid var(--line)
}
.legal-section:first-child {
  padding-top:6px;
  border-top:0
}
.legal-section h2 {
  margin-top:0;
  font-size:26px;
  line-height:1.25;
  letter-spacing:-.5px
}
.legal-section p,.legal-section li {
  font-size:16px;
  line-height:1.8;
  color:#4b594d
}
.legal-section h2+p {
  margin-top:12px
}
.legal-section p+p,.legal-section ul+p {
  margin-top:14px
}
.legal-section ul {
  list-style:none;
  margin:14px 0 0;
  padding:0
}
.legal-section li {
  position:relative;
  padding-left:22px
}
.legal-section li+li {
  margin-top:8px
}
.legal-section li::before {
  content:'';
  position:absolute;
  left:2px;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#779567
}
.legal-section strong {
  color:var(--ink);
  font-weight:600
}
.legal .faq-list summary {
  font-size:17px
}
.legal .faq-list details p {
  font-size:16px
}
.contact-band {
  background:#2d4b36;
  color:#f2f0e4;
  padding-block:60px
}
.contact-layout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.contact-band h2 {
  margin-top:0;
  font-size:34px;
  letter-spacing:-.8px
}
.contact-band p {
  margin-top:10px;
  font-size:15px;
  color:#dae2d1
}
.button-light {
  flex-shrink:0;
  background:var(--paper);
  border-color:var(--paper);
  color:var(--green)
}
.button-light:hover {
  background:#e4e9db
}
.contact-band a:focus-visible {
  outline-color:#e9d7b5
}
.site-footer nav a[aria-current=page] {
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:5px
}
.not-found {
  max-width:680px;
  padding-block:130px 150px;
  text-align:center
}
.not-found>img {
  margin:0 auto 26px;
  border-radius:14px
}
.not-found h1 {
  margin-top:0;
  font-size:clamp(44px,6vw,64px);
  letter-spacing:-2px;
  text-wrap:balance
}
.not-found p {
  max-width:520px;
  margin:20px auto 0;
  font-size:16px;
  line-height:1.8;
  color:var(--muted)
}
.not-found-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:34px
}

@media(max-width:1050px) {
  .legal {
    gap:60px
  }

}

@media(max-width:760px) {
  .legal {
    grid-template-columns:1fr;
    gap:36px;
    padding-block:52px 72px
  }
  .legal-head {
    position:static
  }
  .legal-head h1 {
    font-size:42px;
    letter-spacing:-1.2px
  }
  .legal-lead {
    max-width:none;
    font-size:15px
  }
  .legal-section {
    padding-block:26px
  }
  .legal-section h2 {
    font-size:24px
  }
  .legal-section p,.legal-section li {
    font-size:15px
  }
  .legal .faq-list summary {
    font-size:16px
  }
  .legal .faq-list details p {
    font-size:15px
  }
  .contact-band {
    padding-block:48px
  }
  .contact-layout {
    display:block;
    text-align:center
  }
  .contact-band h2 {
    font-size:30px
  }
  .contact-band .button {
    margin-top:24px
  }
  .not-found {
    padding-block:80px 100px
  }

}