/* Page rules for /privacy/, /terms/, /pay/ and the 404 page. Loaded only by those pages. */

/* legal text */
/* the hero shares the reading column, so the title lines up with the text below it */
.legal-page .page-hero{padding:clamp(44px,5vw,72px) 0 clamp(36px,4vw,56px)}
.legal-page .page-hero .container,.legal-page .container--narrow.prose{width:min(760px,100% - var(--gutter)*2)}
.legal-page .page-title{font-size:clamp(2.3rem,1.5rem + 3vw,3.75rem);line-height:1.02;max-width:none}
.legal-page .page-lede{margin-top:18px;text-wrap:balance}
.legal-page .page-hero+.section{padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,104px)}
.legal-meta{display:flex;flex-wrap:wrap;gap:4px 0;font-size:14.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.legal-meta span+span::before{content:"\00b7";margin:0 .55em}
@media (max-width:599px){
  .legal-meta{flex-direction:column;gap:2px}
  .legal-meta span+span::before{content:none}
}
.legal-page .prose h2{margin-top:48px}
.legal-page .prose h3{margin-top:28px}
.legal-page .prose li{margin-bottom:8px}
.legal-page .prose li::marker{color:var(--blue)}
.prose .legal-meta+h2{margin-top:0}
.prose h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.prose ol{list-style:decimal;padding-left:24px;margin:12px 0 16px}
.prose ol li{padding-left:4px}
.prose ol li::marker{font-weight:700;color:var(--blue)}
.prose ul+p,.prose ol+p{margin-top:14px}
.prose h3+ul{margin-top:6px}

/* pay card, sits in the dark page hero */
.pay-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(26px,3vw,38px)}
.pay-card-title{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.pay-card p{font-size:16px;line-height:1.6;color:var(--ink-3)}
.pay-card-btn{margin-top:22px;width:100%}
.pay-card .pay-card-note{font-size:14.5px;color:var(--muted);margin-top:16px}
.pay-card a:not(.btn){color:var(--blue);font-weight:600}
.pay-card :focus-visible{outline-color:var(--blue)}

/* 404 */
.notfound-help{padding-block:clamp(40px,5vw,64px)}
.notfound-help-text{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-3)}