/* ==========================================================================
   Privacy Policy  (/privacy-policy/)

   A legal content page. The sheet asks for the live text "in structural
   way; no page structure needed", so the page is the shared banner plus one
   reading column (.legal), new here because no legal page existed before.
   Terms of Use can reuse it when its text arrives.

   Band rhythm is the homepage's: 48 / 64 / 80. The banner is white and the
   text band neutral-2-100, so the two do not share a tint.

   The reading column is the FAQ's: full width on phones and tablets,
   columns 3 to 10 from 1350px (x=284 at 1440), with each block capped at
   68ch so line length stays near 68 characters.
   ========================================================================== */

.legal{
  padding-block:48px;
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.legal__cell{grid-column-end:span var(--ps-grid-columns)}
/* line length: about 68 characters, capped per block so headings and text share one left edge */
.legal__cell > *{max-width:68ch}

.legal__cell > *{margin:0}
.legal__cell > * + *{margin-top:16px}

.legal__cell p,
.legal__cell li{
  font:400 15px/26px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.legal__cell h2{
  margin-top:40px;
  font:500 20px/28px var(--sv-font-display);letter-spacing:.5px;
  color:var(--ps-color-neutral-3-500);
  scroll-margin-top:96px;
}
.legal__cell h2 + *{margin-top:12px}
.legal__cell h3{
  margin-top:28px;
  font:500 16px/24px var(--ps-font);letter-spacing:.5px;
  color:var(--ps-color-neutral-3-500);
}
.legal__cell h3 + *{margin-top:8px}

.legal__cell ul{padding-left:1.25em}
.legal__cell li + li{margin-top:6px}
.legal__cell li::marker{color:var(--ps-color-brand-600)}

.legal__cell a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.legal__cell a:hover{color:var(--ps-color-brand-500)}
.legal__cell a:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}

/* email addresses are long unbroken strings: let them wrap on phones */
.legal__cell a[href^="mailto:"]{overflow-wrap:anywhere}

.legal__address{
  padding:16px 20px;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
}

@media (min-width:640px){
  .legal{padding-block:64px}
}
@media (min-width:1024px){
  .legal{padding-block:80px}
}
@media (min-width:1350px){
  .legal__cell{grid-column-start:3;grid-column-end:span 8}
}