/* ===== SmartStacks Legal Pages (Privacy & Terms) =====
   Shared CSS for /privacy/ and /terms/
   Visual language aligned with app FAQ pages.
   ---------------------------------------------------- */
:root{
  --ink: #0f172a;            /* slate-900 */
  --ink-soft:#334155;        /* slate-600 */
  --muted:#64748b;           /* slate-500 */
  --line:#e2e8f0;            /* slate-200 */
  --bg:#ffffff;
  --brand:#3552a4;           /* SmartStacks blue */
  --brand-soft:#e5ecff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --w: 820px;
}

/* Base */
html{scroll-behavior:smooth}
body.legal{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font: 16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; min-height:100vh; flex-direction:column;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Top breadcrumb / utility nav */
.legal-nav{
  max-width:var(--w); margin:24px auto 0; width:100%;
  padding:0 20px; font-size:.95rem; color:var(--ink-soft);
}
.legal-nav a{color:var(--ink-soft)}
.legal-nav a:hover{color:var(--brand)}

/* Page shell */
.legal-wrap{
  max-width:var(--w); margin:14px auto 40px; width:100%; padding:0 20px;
}
.legal-header{
  background:linear-gradient(180deg, var(--brand-soft), #fff);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 22px;
}
.legal-header h1{ margin:0 0 6px; font-size:clamp(1.6rem, 2.2vw, 2.1rem) }
.legal-updated{ color:var(--muted); font-size:.95rem; margin:2px 0 0 }

/* In-page TOC (optional) */
.legal-toc{
  margin:18px 0 14px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px;
  background:#fff;
  display:flex; gap:.65rem; flex-wrap:wrap; align-items:center;
}
.legal-toc strong{ color:var(--ink-soft) }
.legal-toc a{ white-space:nowrap }

/* Content card */
.legal-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: 22px;
}
.legal-card h2{
  margin-top:1.25rem; margin-bottom:.25rem;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}
.legal-card p, .legal-card li{ color:var(--ink); }
.legal-card ul{ padding-left:1.1rem }
.legal-card li{ margin:.4rem 0 }

/* Sticky back-to-top */
#backToTop{
  position:fixed; right:18px; bottom:18px;
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; width:42px; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:var(--shadow); transform: translateY(12px); opacity:0;
  transition: all .22s ease;
}
body.scrolled #backToTop{ transform:none; opacity:1 }
#backToTop:focus{ outline:3px solid var(--brand-soft) }

/* Footer */
.site-footer{ margin-top:auto; background:#f8fafc; border-top:1px solid var(--line); }
.footer-inner{
  max-width:var(--w); margin:0 auto; padding:18px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-brand h3{ margin:0; font-size:1.05rem; color:var(--ink-soft) }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.8rem; flex-wrap:wrap }
.footer-nav a{ color:var(--ink-soft) }
.footer-nav a:hover{ color:var(--brand) }

/* Small viewports */
@media (max-width:520px){
  .legal-header{ padding:22px 16px }
  .legal-card{ padding:18px 16px }
}