/* ============================================================================
   WebSignalytics — shared stylesheet for content pages (glossary, case studies,
   blog). Tokens and chrome are extracted verbatim from the homepage (index.html)
   so generated pages match the marketing site exactly.

   Loaded on every generated page via:
       <link rel="stylesheet" href="/assets/site.css">
   Generated pages also embed a tiny inline :root + base fallback so they render
   even if this file is missing (see generator templates).
   ========================================================================== */

/* ── design tokens (verbatim from homepage) ────────────────────────────── */
:root{
  --navy:#1a1a2e;
  --gold:#c8973a;
  --gold-light:#f0e4c8;
  --cream:#f0ece4;
  --warm-white:#ffffff;
  --text:#1a1a2e;
  --muted:#6b7280;
  --border:#e0d9cf;
  --white:#ffffff;
}

/* ── base typography ───────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  color:var(--text);
  background:var(--warm-white);
  line-height:1.6;
  font-size:16px;
  margin:0;
}

/* ── navigation (matches homepage) ─────────────────────────────────────── */
nav:not(.breadcrumb){
  position:sticky;top:0;z-index:100;
  background:rgba(253,252,250,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.wordmark{
  font-family:'Playfair Display',serif;
  font-size:1.35rem;font-weight:700;color:var(--navy);
  text-decoration:none;letter-spacing:-0.01em;
}
.wordmark span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-login{
  font-size:0.875rem;font-weight:400;color:var(--muted);
  text-decoration:none;transition:color 0.15s;
}
.nav-login:hover{color:var(--navy)}
.nav-cta{
  background:var(--navy);color:var(--white);
  padding:9px 22px;border-radius:6px;
  font-size:0.875rem;font-weight:500;
  text-decoration:none;transition:opacity 0.15s;
}
.nav-cta:hover{opacity:0.85}

/* ── article / main content layout ─────────────────────────────────────── */
main{
  max-width:760px;
  margin:0 auto;
  padding:56px 5% 80px;
}
main h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:700;color:var(--navy);
  line-height:1.15;letter-spacing:-0.01em;
  margin:0 0 20px;
}
main h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:600;color:var(--navy);
  line-height:1.25;
  margin:48px 0 14px;
}
main h3{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;font-weight:600;color:var(--navy);
  margin:32px 0 10px;
}
main p{margin:0 0 18px}
main ul,main ol{margin:0 0 18px;padding-left:24px}
main li{margin-bottom:8px}
main strong{font-weight:600;color:var(--navy)}
main blockquote{
  border-left:3px solid var(--gold);
  background:var(--cream);
  margin:24px 0;padding:18px 24px;
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.15rem;color:var(--navy);
  border-radius:0 6px 6px 0;
}

/* ── links (gold) ──────────────────────────────────────────────────────── */
main a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(200,151,58,0.35);
  transition:border-color 0.15s,color 0.15s;
}
main a:hover{color:#b8832a;border-bottom-color:var(--gold)}

/* ── eyebrow / category label ──────────────────────────────────────────── */
.eyebrow{
  display:inline-block;
  font-size:0.72rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}

/* ── breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb{
  position:sticky;top:64px;z-index:90;background:var(--warm-white);
  padding:16px 5% 14px;font-size:0.8rem;color:var(--muted);
  margin-bottom:24px;
}
.breadcrumb a{
  color:var(--muted);text-decoration:none;border:none;
  transition:color 0.15s;
}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb span{margin:0 8px;color:var(--border)}

/* ── glossary index grid + term cards ──────────────────────────────────── */
.glossary-category{margin:40px 0}
.glossary-category h2{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:600;
  color:var(--navy);margin:0 0 18px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.glossary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.term-card{
  display:block;
  background:var(--cream);
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:8px;
  padding:16px 18px;
  text-decoration:none;
  transition:transform 0.15s,box-shadow 0.15s;
}
.term-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(26,26,46,0.08);
}
.term-card .term-name{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;font-weight:600;color:var(--navy);
  display:block;margin-bottom:4px;
}
.term-card .term-snippet{
  font-size:0.82rem;color:var(--muted);line-height:1.45;
}

/* ── related links block (cross-link footer on every entry) ────────────── */
.related-links{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.related-links h2{
  font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;
  color:var(--navy);margin:0 0 14px;
}
.related-links .related-group{margin-bottom:18px}
.related-links .related-label{
  font-size:0.72rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:8px;
}
.related-links ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}
.related-links li{margin:0}
.related-links li a{
  display:inline-block;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:100px;
  padding:6px 16px;
  font-size:0.85rem;color:var(--navy);
  text-decoration:none;border-bottom:none;
  transition:all 0.15s;
}
.related-links li a:hover{
  background:var(--gold-light);border-color:var(--gold);color:var(--navy);
}

/* ── inline trial CTA card ─────────────────────────────────────────────── */
.cta-card{
  margin:40px 0;
  background:var(--navy);
  border-radius:12px;
  padding:32px 28px;
  text-align:center;
  color:var(--white);
}
.cta-card h3{
  font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:600;
  color:var(--white);margin:0 0 8px;
}
.cta-card p{color:rgba(255,255,255,0.75);font-size:0.92rem;margin:0 0 18px}
.cta-card a.cta-button{
  display:inline-block;
  background:var(--gold);color:var(--navy);
  padding:13px 32px;border-radius:7px;
  font-size:0.95rem;font-weight:600;
  text-decoration:none;border:none;
  transition:all 0.15s;
}
.cta-card a.cta-button:hover{
  background:#b8832a;color:var(--white);transform:translateY(-1px);
}

/* ── footer (matches homepage) ─────────────────────────────────────────── */
footer{
  background:var(--navy);color:rgba(255,255,255,0.55);
  padding:40px 5%;text-align:center;
}
.footer-wordmark{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;font-weight:700;color:var(--white);
  margin-bottom:12px;
}
.footer-wordmark span{color:var(--gold)}
footer p{font-size:0.8rem;margin:0 0 8px}
footer a{color:rgba(255,255,255,0.55);text-decoration:none}
footer a:hover{color:var(--white)}
.footer-links{
  display:flex;gap:20px;justify-content:center;
  margin-top:16px;font-size:0.78rem;flex-wrap:wrap;
}

/* ── mobile ────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  main{padding:40px 6% 64px}
  .nav-login{display:none}
  .glossary-grid{grid-template-columns:1fr}
  main h1{font-size:1.9rem}
}

.nav-links{display:flex;gap:20px;align-items:center}.nav-links a{font-size:0.9rem;color:var(--navy);text-decoration:none;font-weight:500}.nav-links a:hover{color:var(--gold)}@media(max-width:680px){.nav-links{display:none}}