/* ============================================================
   ============= LEGAL PAGE STYLES ============================
   ============================================================
   Layers on top of blog-post.css. Used by:
     privacy.html, terms.html, income-disclosure.html
   ============================================================ */

/* Hero theme for the three legal pages */
.article-hero.theme-legal{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(157,213,200,0.35) 0%, transparent 60%),
    linear-gradient(135deg, #0F1730 0%, #1A4CFF 100%);
}

/* Tighter legal article body */
.legal-body{
  max-width:820px; margin:0 auto;
  padding:64px 0 96px;
  font-size:16px; line-height:1.7; color:var(--ink-soft);
}
@media (max-width:640px){
  .legal-body{ padding:40px 0 64px; }
}
.legal-body h2{
  font-size:clamp(22px, 2.4vw, 28px);
  font-weight:700; color:var(--ink); letter-spacing:-0.01em;
  margin:48px 0 14px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{
  font-size:18px; font-weight:600; color:var(--ink);
  margin:28px 0 10px;
}
.legal-body p{ margin-bottom:14px; }
.legal-body p + p{ margin-top:0; }
.legal-body ul, .legal-body ol{
  margin:14px 0 18px 22px;
  padding-left:0;
}
.legal-body li{ margin-bottom:8px; padding-left:6px; }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body a{
  color:var(--blue); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.legal-body a:hover{ color:var(--blue-dark); }

/* Last-updated meta strip */
.legal-meta{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:980px;
  background:var(--bg-alt); color:var(--ink-mute);
  font-size:13px; margin-bottom:32px;
}
.legal-meta .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--mint-deep);
}

/* Important callout box (FTC required disclaimers, etc.) */
.legal-callout{
  border-left:3px solid var(--blue);
  background:var(--blue-tint);
  padding:18px 22px; border-radius:12px;
  margin:24px 0;
}
.legal-callout strong{ color:var(--blue-dark); }
.legal-callout p:last-child{ margin-bottom:0; }

.legal-callout.warning{
  border-left-color:var(--gold-text,#966618);
  background:var(--gold-tint);
}
.legal-callout.warning strong{ color:#8B5C00; }

/* Earnings table for income disclosure */
.earnings-table{
  width:100%; border-collapse:collapse; margin:18px 0 24px;
  font-size:14.5px;
}
.earnings-table th, .earnings-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.earnings-table th{
  background:var(--bg-alt);
  font-weight:600; color:var(--ink);
  font-size:13px; letter-spacing:0.02em;
  text-transform:uppercase;
}
.earnings-table td.num{
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.earnings-table tr:hover td{ background:var(--bg-alt); }
@media (max-width:640px){
  .earnings-table{ font-size:13px; }
  .earnings-table th, .earnings-table td{ padding:10px 8px; }
}

/* TOC sidebar for long legal pages */
.legal-toc{
  position:sticky; top:90px;
  background:var(--bg-alt);
  border-radius:18px;
  padding:18px 20px;
  font-size:13.5px;
}
.legal-toc h4{
  font-size:11.5px; font-weight:600; color:var(--ink-mute);
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:10px;
}
.legal-toc a{
  display:block; padding:6px 0;
  color:var(--ink-soft); transition:color .15s;
  border-bottom:1px solid transparent;
}
.legal-toc a:hover{ color:var(--blue); }

/* Two-column wrapper for TOC + body on large screens */
.legal-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:1100px;
  margin:0 auto;
  padding:0 28px;
}
@media (min-width:1080px){
  .legal-layout{
    grid-template-columns:220px 1fr;
    gap:48px;
  }
  .legal-body{ padding-top:48px; }
}
@media (max-width:1079px){
  .legal-toc{ display:none; }
}