/* askchat.studio — legal.css — one reading column for About, Privacy, Terms and Refund.
   Spec: knowledge/projects/askchat_landing/win_redesign_plan.md, section 3.6.

   No retro physics on these pages: white paper, Schibsted Grotesk, 1px rules, one accent for links.
   The single window on /about (the contact card) is built from ui.css, which must be linked
   BEFORE this file — tokens, base type and the window live there. */

/* The column hangs on the page grid: <main class="wrap col"> gives the outer frame and the side
   gutter, .col caps the measure at 720px, and this rule only sets the vertical rhythm. Left edge
   of the text therefore equals the left edge of the brand in the header. */
.legal{margin:0;padding:56px 0 88px;line-height:1.7}
.legal > :first-child{margin-top:0}

.legal h1{font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 20px}
.legal h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:44px 0 12px}
.legal h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin:30px 0 8px}

.legal p,.legal li{font-size:17px;line-height:1.7}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal li::marker{color:var(--quiet)}
.legal strong,.legal b{font-weight:700}
.legal em,.legal i{font-style:italic}
.legal a{color:var(--pen);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* a link that is a button keeps the button look: the bevel says it is pressable, the underline does not */
.legal a.btn{color:var(--ink);text-decoration:none}
.legal a.btn.pri{color:#fff}
.legal hr{margin:32px 0}

/* the lead paragraph under the title (refund) */
.legal .lede{font-size:20px;line-height:1.5;margin:0 0 28px}
/* the date line: right under the title on privacy and terms, at the end on refund */
.legal .lastupdated{font-style:normal;font-size:13px;line-height:1.5;color:var(--quiet);margin:0 0 30px}
.legal .updated{font-size:13px;line-height:1.5;color:var(--quiet);margin:34px 0 0;padding-top:16px;border-top:1px solid var(--rule)}

@media (max-width:900px){
  .legal{padding:32px 0 64px}
  .legal h1{font-size:32px}
  .legal h2{font-size:24px;margin-top:34px}
  .legal h3{font-size:18px;margin-top:26px}
  .legal .lede{font-size:17px}
}