/* 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 #e7eaec;}
.legal-nav a{padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:#676a6c; font-size:14px; font-weight:600;}
.legal-nav a:hover{color:#1ab394;}
.legal-nav a.active{color:#1ab394; border-left-color:#1ab394;}
.legal-body{max-width:760px; color:#676a6c; font-size:15px; line-height:1.7;}
.legal-body h2{font-size:20px; font-weight:600; color:#2f4050; margin:36px 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:15px; color:#676a6c;}
.legal-body ul{margin:0 0 14px; padding-left:20px; list-style:disc;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:#1ab394; text-decoration:underline;}
.legal-body strong{color:#2f4050;}

@media(max-width:860px){
  .legal{padding:36px 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:#1ab394;}
}