/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Use)
   About-Us banner + the service-page copy styles, laid out in flow so the
   document can be any length. Desktop 1440 canvas, mobile 402 canvas.
   ========================================================================== */

.page--legal { height: auto; background: #f5f5f5; }
.page--legal > section { position: relative; width: 1440px; }

/* Banner (About Us pattern) */
.banner { min-height: 448px; padding: 172px 112px 122px 76px; display: grid; grid-template-columns: 640px 493px; column-gap: 119px; overflow: hidden; background: var(--navy); color: var(--white); }
.banner__lines { position: absolute; width: 720px; height: 1616px; pointer-events: none; }
.banner__lines--r { left: 720px; top: -564px; }
.banner__lines--l { left: 0; top: -604px; }
.banner__title { position: relative; font-size: 56px; line-height: 1; font-weight: 500; text-transform: capitalize; overflow-wrap: anywhere; }
.banner__sub { position: relative; margin-top: 42px; font-size: 24px; line-height: 28px; color: var(--steel); overflow-wrap: anywhere; }
.banner__decoration { position: absolute; inset: 0; pointer-events: none; }
.banner__corner { position: absolute; width: 44px; height: 44px; }
.banner__corner--tl { left: 0; top: 0; transform: rotate(90deg); }
.banner__corner--tr { left: 1396px; top: 0; transform: rotate(180deg); }
.banner__corner--bl { left: 0; bottom: 0; }
.banner__corner--br { left: 1396px; bottom: 0; transform: rotate(-90deg); }
.banner__rule { position: absolute; background: var(--white); }
.banner__rule--top { left: 44px; top: 4px; width: 1352px; height: 1px; }
.banner__rule--bottom { left: 44px; bottom: 4px; width: 1352px; height: 1px; }
.banner__rule--left { left: 4px; top: 0; width: 1px; height: 100%; }
.banner__rule--right { left: 1435px; top: 0; width: 1px; height: 100%; }
.banner__notch { position: absolute; left: 692px; width: 56px; height: 4px; background: var(--white); }
.banner__notch--top { top: 0; }
.banner__notch--bottom { bottom: 0; }

/* Document */
.legal { padding: 64px 76px 120px; color: var(--black); overflow-wrap: anywhere; }
.legal__intro { width: 1219px; font-size: 18px; line-height: 24px; opacity: .76; margin-bottom: 8px; }
.legal__toc {
  display: flex; flex-wrap: wrap; gap: 12px; width: 1219px; margin: 32px 0 56px;
}
.legal__toc a {
  padding: 12px 20px; border-radius: 88px; background: var(--white);
  font-size: 14px; line-height: 20px; font-weight: 500; max-width: 100%;
  transition: box-shadow var(--dur, 220ms) var(--ease, ease), translate var(--dur, 220ms) var(--ease, ease);
}
.legal__toc a:hover { translate: 0 -2px; box-shadow: 0 8px 14px rgba(0,0,0,.08); }
.legal__section { width: 1219px; padding-top: 24px; }
.legal__section + .legal__section { margin-top: 32px; border-top: 1px dashed rgba(0,0,0,.16); padding-top: 40px; }
.legal__section h2 { font-size: 28px; line-height: 40px; font-weight: 600; margin-bottom: 12px; scroll-margin-top: 40px; }
.legal__section h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 24px 0 8px; }
.legal__section p { font-size: 18px; line-height: 24px; opacity: .76; margin-bottom: 16px; }
.legal__section ul, .legal__section ol { margin: 0 0 16px; font-size: 18px; line-height: 24px; opacity: .76; }
.legal__copy ul { list-style: disc; padding-left: 21px; }
.legal__copy ol { list-style: decimal; padding-left: 21px; }
.legal__copy li p, .legal__copy li ul, .legal__copy li ol { opacity: 1; margin-bottom: 0; }
.legal__copy > :last-child { margin-bottom: 0; }
.legal__copy a { color: var(--blue); text-decoration: underline; text-underline-position: from-font; }
.legal__intro p + p, .legal__meta p + p { margin-top: 16px; }
.legal__meta { width: 1219px; margin-top: 56px; padding-top: 24px; border-top: 1px dashed rgba(0,0,0,.16); font-size: 14px; line-height: 20px; opacity: .56; }

/* Footer in flow */
.page--legal .footer { position: relative; bottom: auto; height: 658px; }
.page--legal .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
.footer-spacer { height: 98px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 899px) {
  .page--legal > section { width: 402px; }
  .banner { min-height: 372px; padding: 196px 32px 68px; grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .banner__frame { position: absolute; left: 0; top: 0; width: 402px; height: 100%; pointer-events: none; }
  .banner__notch { left: 167px; width: 68px; height: 8px; }
  .banner__tagline { position: absolute; left: 0; top: 104px; width: 100%; font-size: 12px; line-height: 16px; text-align: center; text-transform: capitalize; white-space: nowrap; }
  .banner__title { font-size: 24px; }
  .banner__sub { margin-top: 0; font-size: 14px; line-height: 16px; }

  .legal { padding: 40px 24px 72px; }
  .legal__intro { width: 354px; font-size: 14px; line-height: 20px; }
  .legal__toc { width: 354px; gap: 8px; margin: 24px 0 40px; }
  .legal__toc a { padding: 10px 16px; font-size: 12px; line-height: 16px; }
  .legal__section { width: 354px; padding-top: 16px; }
  .legal__section + .legal__section { margin-top: 24px; padding-top: 32px; }
  .legal__section h2 { font-size: 20px; line-height: 24px; margin-bottom: 8px; }
  .legal__section h3 { font-size: 16px; line-height: 20px; margin: 16px 0 6px; }
  .legal__section p, .legal__section ul, .legal__section ol { font-size: 14px; line-height: 20px; margin-bottom: 12px; }
  .legal__copy ul, .legal__copy ol { padding-left: 17px; }
  .legal__copy li p, .legal__copy li ul, .legal__copy li ol { margin-bottom: 0; }
  .legal__meta { width: 354px; margin-top: 40px; font-size: 12px; line-height: 16px; }
  .footer-spacer { height: 56px; }
}