/* Terms, privacy and refunds, on both brands: a reading column beside the
   list of legal pages, in the landing skin's colours (landing.css loads last). */
.legal{padding:56px 0 80px; background:#fff;}
.legal-wrap{display:grid; grid-template-columns:220px minmax(0, 1fr); gap:48px; align-items:start;}
.legal-nav{position:sticky; top:96px; display:flex; flex-direction:column; gap:4px; border-left:2px solid var(--lp-border);}
.legal-nav a{padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--lp-text); font-size:var(--fs-sm); font-weight:600;}
.legal-nav a:hover{color:var(--navy);}
.legal-nav a.active{color:var(--navy); border-left-color:var(--navy);}
.legal-body{max-width:760px; color:var(--lp-text); font-size:var(--fs-base); line-height:1.7;}
.legal-body h2{font-size:var(--fs-xl); font-weight:600; color:var(--lp-dark); margin:32px 0 10px; letter-spacing:0; text-transform:none;}
.legal-body h2::after{display:none;}
/* section p in landing.css (13px, muted) loads later; this selector outranks it. */
.legal .legal-body p{margin:0 0 14px; font-size:var(--fs-base); color:var(--lp-text);}
.legal-body ul{margin:0 0 14px; padding-left:20px; list-style:disc;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:var(--navy); text-decoration:underline;}
.legal-body strong{color:var(--lp-dark);}

@media(max-width:860px){
  .legal{padding:32px 0 56px;}
  .legal-wrap{grid-template-columns:minmax(0, 1fr); gap:24px;}
  .legal-nav{position:static; flex-direction:row; flex-wrap:wrap; gap:8px 16px; border-left:0;}
  .legal-nav a{padding:4px 0; margin:0; border-left:0; border-bottom:2px solid transparent;}
  .legal-nav a.active{border-bottom-color:var(--navy);}
}