/* Legal frame (s-stragglers, 2026-10-29) for /privacy, /terms and /returns. Only the frame: the legal text is verbatim.
   On the system via main.ds + answer.css; this adds the one layout those pages need. At >= 1024 px each H2 sits in the
   left column beside its text, so the band reaches both gutters (edge-to-edge gate) while the text keeps a <= 80 ch line. */
.ds .page-hero.band{padding-bottom:0}
.ds .page-hero h1{margin:0;font-size:var(--fs-display)}
.ds .page-hero p{margin:var(--s-3) 0 0;color:var(--muted);font-size:var(--fs-small);max-width:none}
.ds .legal{max-width:none}
.ds .legal>*{margin:0 0 var(--s-4)}
.ds .legal :is(p,li){max-width:68ch;color:#C8CEE0}
.ds .legal ul{list-style:disc;padding-left:var(--s-5)}
.ds .legal li+li{margin-top:var(--s-2)}
.ds .legal>h2{margin-top:var(--s-7)}
.ds .legal>h2:first-child{margin-top:0}
.ds .legal>h3{margin-top:var(--s-5)}
.ds .legal a{color:var(--blue-lit);text-decoration:underline;text-underline-offset:3px}
@media(min-width:1024px){
  .ds .legal{display:grid;grid-template-columns:minmax(0,1fr) min(58%,80ch);column-gap:var(--s-8);align-items:start}
  .ds .legal>*{grid-column:2}
  .ds .legal :is(p,li){max-width:none}
  .ds .legal>h2{grid-column:1;margin:0}
  .ds .legal>:is(h2,h2+*){margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--hair)}
  .ds .legal>:first-child:not(h2){margin-top:0}
}