/* ============================================================
   Bluehawk — Legal & Support page styles
   Reuses tokens, header, footer, buttons from styles.css
   ============================================================ */

/* legal page always sits on white, so the header is solid from load */
body.legal{background:var(--surface2);}
body.legal header{background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--divider); box-shadow:var(--sh1);}
body.legal header .brand .wordmark{color:var(--ink900);}
body.legal header nav.main a{color:var(--ink500);}
body.legal header nav.main a:hover{color:var(--ink900);}
body.legal header .btn-light{background:var(--royal); color:#fff; border-color:transparent; backdrop-filter:none;}
body.legal header .btn-light:hover{background:var(--royal700);}
body.legal header .menu-toggle{color:var(--ink900);}

/* ── page hero / intro ── */
.legal-head{padding:140px 0 56px; border-bottom:1px solid var(--divider); background:var(--surface);}
.legal-head .eyebrow{display:block; margin-bottom:18px;}
.legal-head h1{
  font-weight:600; font-size:clamp(38px,5.2vw,60px); line-height:1.02;
  letter-spacing:-.028em; color:var(--ink900); max-width:18ch; text-wrap:balance;
}
.legal-head .intro{margin-top:22px; max-width:64ch; font-size:19px; line-height:1.55; color:var(--ink500); text-wrap:pretty;}
.legal-meta{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:28px;}
.legal-meta .pill{
  font-family:'GeistMono',monospace; font-size:12px; letter-spacing:.04em; color:var(--ink700);
  background:var(--surface2); border:1px solid var(--divider); padding:8px 14px; border-radius:var(--r-pill);
}
.legal-meta .pill.accent{background:var(--royal50); border-color:var(--royal100); color:var(--royal700);}
.legal-disclaimer{
  margin-top:26px; max-width:70ch; font-size:14px; line-height:1.55; color:var(--ink400);
  border-left:2px solid var(--dividerStrong); padding-left:16px;
}

/* ── body layout: sticky TOC + content ── */
.legal-body{padding:64px 0 40px;}
.legal-grid{display:grid; grid-template-columns:248px 1fr; gap:64px; align-items:start;}

.toc{position:sticky; top:104px;}
.toc .toc-label{font-family:'GeistMono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink400); margin-bottom:16px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{counter-increment:toc;}
.toc a{
  display:flex; gap:12px; align-items:baseline; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink500); font-size:15px; font-weight:500; line-height:1.3;
  border-left:2px solid transparent; transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.toc a::before{content:counter(toc,decimal-leading-zero); font-family:'GeistMono',monospace; font-size:12px; color:var(--ink300); transition:color .18s var(--ease);}
.toc a:hover{background:var(--surface2); color:var(--ink900);}
.toc a.active{color:var(--royal); background:var(--royal50); border-left-color:var(--royal);}
.toc a.active::before{color:var(--royal);}

/* mobile inline TOC card */
.toc-card{display:none;}

/* ── content sections ── */
.legal-content{max-width:760px;}
.legal-section{padding:8px 0 56px; scroll-margin-top:100px;}
.legal-section + .legal-section{border-top:1px solid var(--divider); padding-top:48px;}
.legal-section > .sec-num{font-family:'GeistMono',monospace; font-size:13px; color:var(--royal); letter-spacing:.04em; display:block; margin-bottom:12px;}
.legal-section h2{font-weight:600; font-size:clamp(26px,3vw,34px); letter-spacing:-.02em; line-height:1.08; color:var(--ink900); margin-bottom:8px;}
.legal-section .sec-sub{color:var(--ink500); font-size:17px; line-height:1.5; margin-bottom:24px; text-wrap:pretty;}

.legal-content h3{font-size:18px; font-weight:600; color:var(--ink900); margin:30px 0 12px; letter-spacing:-.01em;}
.legal-content p{color:var(--ink700); font-size:16px; line-height:1.65; margin-bottom:16px; text-wrap:pretty;}
.legal-content p a, .legal-content li a{color:var(--royal); font-weight:500; text-decoration:none; border-bottom:1px solid var(--royal100); transition:border-color .15s var(--ease);}
.legal-content p a:hover, .legal-content li a:hover{border-bottom-color:var(--royal);}
.legal-content ul{margin:0 0 18px; padding:0; list-style:none; display:grid; gap:11px;}
.legal-content ul li{position:relative; padding-left:24px; color:var(--ink700); font-size:16px; line-height:1.6; text-wrap:pretty;}
.legal-content ul li::before{content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--royal); opacity:.55;}
.legal-content ul li strong{color:var(--ink900); font-weight:600;}
.legal-content .lead-in{color:var(--ink900); font-weight:500;}

/* contact cards in support section */
.support-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 24px;}
.support-card{
  display:flex; gap:14px; align-items:center; padding:18px; background:var(--surface);
  border:1px solid var(--divider); border-radius:var(--r-md); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.support-card:hover{border-color:var(--dividerStrong); box-shadow:var(--sh1);}
.support-card .sc-ico{flex:none; width:42px; height:42px; border-radius:var(--r-sm); background:var(--royal50); color:var(--royal); display:flex; align-items:center; justify-content:center;}
.support-card .sc-ico svg{width:20px; height:20px;}
.support-card .k{font-family:'GeistMono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink400); margin-bottom:4px;}
.support-card .v{font-size:16px; color:var(--ink900); font-weight:500; word-break:break-word;}

/* quick-jump chips under support */
.jump-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.jump-row a{
  font-size:13.5px; font-weight:500; color:var(--ink700); background:var(--surface); border:1px solid var(--dividerStrong);
  padding:9px 15px; border-radius:var(--r-pill); transition:all .16s var(--ease);
}
.jump-row a:hover{border-color:var(--royal); color:var(--royal); background:var(--royal50);}

/* callout */
.callout{
  background:var(--surface); border:1px solid var(--divider); border-left:3px solid var(--royal);
  border-radius:var(--r-md); padding:20px 22px; margin:8px 0 20px;
}
.callout p{margin:0; font-size:15.5px; color:var(--ink700);}
.callout p strong{color:var(--ink900);}

/* back-to-top + help footer band inside content */
.legal-help{
  margin-top:8px; background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.legal-help h3{color:#fff; font-size:22px; margin:0 0 6px; font-weight:600; letter-spacing:-.01em;}
.legal-help p{color:rgba(255,255,255,.72); font-size:15px; margin:0;}
.legal-help .btn-on-dark{background:#fff; color:var(--navy);}
.legal-help .btn-on-dark:hover{background:#eef2f8;}

/* ── responsive ── */
@media (max-width:920px){
  .legal-grid{grid-template-columns:1fr; gap:0;}
  .toc{display:none;}
  .toc-card{
    display:block; background:var(--surface); border:1px solid var(--divider); border-radius:var(--r-lg);
    padding:22px 24px; margin-bottom:40px;
  }
  .toc-card .toc-label{font-family:'GeistMono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink400); margin-bottom:14px;}
  .toc-card ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:2px;}
  .toc-card li{counter-increment:toc;}
  .toc-card a{display:flex; gap:12px; align-items:baseline; padding:9px 4px; color:var(--ink700); font-size:15.5px; font-weight:500; border-bottom:1px solid var(--divider);}
  .toc-card li:last-child a{border-bottom:0;}
  .toc-card a::before{content:counter(toc,decimal-leading-zero); font-family:'GeistMono',monospace; font-size:12px; color:var(--ink300);}
}
@media (max-width:880px){
  .legal-head{padding:120px 0 48px;}
}
@media (max-width:560px){
  .support-cards{grid-template-columns:1fr;}
  .legal-help{padding:26px 24px;}
  .legal-body{padding:44px 0 30px;}
}