/* ==========================================================================
   FactFlow — legal pages (/privacy, /terms). Requires base.css.
   MOBILE-FIRST: base rules are the 320px layout; min-width queries build up.
   ========================================================================== */

.legal{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding:var(--sp-6) var(--gutter) var(--sp-6);
}
@media(min-width:768px){ .legal{padding-block:52px 40px} }
@media(min-width:1024px){ .legal{padding-block:56px 40px} }

.legal h1{
  font-family:var(--serif);
  font-size:clamp(28px,7.4vw,44px);
  font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--sp-2);
}

.legal .date{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);line-height:1.8;margin-bottom:var(--sp-5);
}
@media(min-width:425px){ .legal .date{font-size:11px} }
@media(min-width:768px){ .legal .date{margin-bottom:34px} }

.legal h2{
  font-family:var(--serif);
  font-size:clamp(20px,4.8vw,24px);
  font-weight:500;
  margin:var(--sp-5) 0 var(--sp-2);
}
@media(min-width:768px){ .legal h2{margin-top:34px} }

.legal h3{
  font-family:var(--sans);
  font-size:clamp(16px,3.6vw,18px);
  font-weight:600;
  margin:var(--sp-4) 0 var(--sp-2);
  color:var(--ink);
}
@media(min-width:768px){ .legal h3{margin-top:28px} }

.legal ol{margin:0 0 var(--sp-3) 22px;padding:0}
.legal ol li{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-bottom:7px}
@media(min-width:768px){
  .legal ol li{font-size:16px}
  .legal ol{margin-left:26px}
}

.legal p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-bottom:14px}
.legal ul{margin:0 0 var(--sp-3) 18px}
.legal li{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-bottom:7px}
@media(min-width:768px){
  .legal p,.legal li{font-size:16px}
  .legal ul{margin-left:22px}
}

.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--false)}

/* long emails and addresses must not force sideways scroll on narrow screens */
.legal p,.legal li{overflow-wrap:anywhere}

.legal .caps{
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.65;
}
@media(min-width:768px){ .legal .caps{font-size:14.5px} }

.notice{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--false);
  padding:var(--sp-3);
  margin:var(--sp-5) 0 0;
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
}
.notice p:last-child{margin-bottom:0}
@media(min-width:425px){ .notice{padding:18px 22px;font-size:15px} }
@media(min-width:768px){ .notice{margin-bottom:32px} }

@media print{
  .legal{max-width:none;padding:0}
}