/* ============================================================
   SITE DESIGN SYSTEM — shared across Home + all legal/info pages.
   Extends the product's own "Emerald Glass" palette (see card.html)
   so the marketing site and the product feel like one brand, not
   two different tools bolted together.
============================================================ */
:root{
  --ink:#0f172a; --ink-soft:#54606c; --ink-faint:#8b95a1;
  --bg:#f7faf9; --panel:#ffffff; --panel-2:#eef4f1;
  --brass:#3b5cf0; --brass-deep:#6d28d9; --brass-light:#c7d2fe;
  --orange:#3b5cf0; --orange-deep:#6d28d9;
  --line:#e1e9e6;
  --shadow:0 10px 34px rgba(15,23,42,0.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,0.16);
  --maxw:1160px; --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.01em;}
p{line-height:1.7;color:var(--ink-soft);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--brass);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:100px;font-weight:700;font-size:15.5px;font-family:'Space Grotesk',sans-serif;border:none;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;}
.btn.primary{background:linear-gradient(135deg,var(--brass),var(--brass-deep));color:#fff;box-shadow:var(--shadow-lg);}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 28px 70px rgba(15,122,103,0.28);}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow);}
.btn.ghost:hover{transform:translateY(-2px);}
.btn.sm{height:42px;padding:0 20px;font-size:14px;}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(247,250,249,0.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease;}
.site-nav.scrolled{border-bottom-color:var(--line);}
.site-nav .inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;font-family:'Space Grotesk',sans-serif;}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,var(--brass),var(--brass-deep));display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .2s;}
.nav-links a:hover{color:var(--brass-deep);}
.nav-cta{display:flex;align-items:center;gap:12px;}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-cta .btn.ghost{display:none;}
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#c9d2d8;padding:64px 0 28px;margin-top:120px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-grid h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;font-family:'Space Grotesk',sans-serif;}
.footer-grid a{display:block;font-size:14.5px;color:#a7b2ba;margin-bottom:11px;transition:color .2s;}
.footer-grid a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand p{color:#8f9aa2;font-size:14px;max-width:280px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px;font-size:13px;color:#7d8890;}
.footer-bottom .legal-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-bottom a:hover{color:#fff;}
@media (max-width:800px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:32px;}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger > *:nth-child(5){transition-delay:.30s;}
.reveal-stagger > *:nth-child(6){transition-delay:.37s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ---------- legal/document pages ---------- */
.doc-hero{padding:64px 0 40px;}
.doc-hero .eyebrow{margin-bottom:14px;}
.doc-hero h1{font-size:clamp(30px,5vw,44px);}
.doc-hero .updated{font-size:13.5px;color:var(--ink-faint);margin-top:12px;}
.doc-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;padding-bottom:100px;align-items:start;}
.doc-toc{position:sticky;top:96px;}
.doc-toc a{display:block;font-size:13.5px;color:var(--ink-soft);padding:8px 0 8px 14px;border-left:2px solid var(--line);transition:all .2s;}
.doc-toc a:hover, .doc-toc a.active{color:var(--brass-deep);border-left-color:var(--brass);font-weight:600;}
.doc-body h2{font-size:22px;margin-top:44px;margin-bottom:14px;scroll-margin-top:96px;}
.doc-body h2:first-child{margin-top:0;}
.doc-body h3{font-size:16.5px;margin-top:26px;margin-bottom:10px;}
.doc-body p{margin:0 0 14px;font-size:15px;}
.doc-body ul, .doc-body ol{color:var(--ink-soft);font-size:15px;line-height:1.75;padding-left:22px;margin:0 0 14px;}
.doc-body li{margin-bottom:6px;}
.doc-body strong{color:var(--ink);}
.doc-body .fill-in{background:#fff4e0;color:#8a5a10;padding:1px 6px;border-radius:5px;font-weight:600;font-size:0.94em;}
.doc-callout{background:var(--panel-2);border-left:3px solid var(--brass);border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0;font-size:14.5px;color:var(--ink-soft);}
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr; padding-bottom:56px;}
  .doc-toc{display:none;}
  .doc-hero{padding:36px 0 24px;}
}