/* ============================================================================
   site.css — shared design tokens for the refreshed pages. The header and
   footer themselves are Tailwind (see _includes/site-header.njk).

   Tokens use a `--c-` prefix: figure styles already use `--accent`, `--ink`...
   ============================================================================ */

:root{
  --c-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --c-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-serif:"Libre Baskerville",Georgia,serif;
  --c-accent:#2563eb;
  --c-accent-dark:#1d4ed8;
  --c-accent-soft:#93c5fd;
  --c-accent-wash:#eff6ff;
  --c-amber:#d97706;
  --c-amber-bright:#f59e0b;
  /* Small-text colors that pass WCAG AA (4.5:1) on white and --c-band.
     --c-amber and #94a3b8 don't at label sizes. */
  --c-amber-text:#b45309;
  --c-muted:#64748b;
  --c-gold:#fcd34d;
  --c-ink:#0f172a;
  --c-line:#e2e8f0;
  --c-hair:#f1f5f9;
  --c-band:#f8fafc;
  --c-shadow:0 4px 20px rgba(15,23,42,.06);
  --c-rule:linear-gradient(90deg,#2563eb 55%,#d97706 55%);
}
/* ---- page base for site.njk pages (on top of Tailwind's preflight) ----
   :where() keeps these at zero specificity so any component class wins. */
body.site-page{
  margin:0;background:#fff;color:var(--c-ink);
  font-family:var(--c-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
body.site-page > main{flex:1 0 auto}
:where(.site-page) *,:where(.site-page) *::before,:where(.site-page) *::after{box-sizing:border-box}
:where(.site-page) :is(h1,h2,h3,h4,p,figure,blockquote,ul,ol){margin:0}
:where(.site-page) img{max-width:100%}
/* Links: element-level specificity (0,0,1), so this beats Tailwind's preflight
   `a{color:inherit}` (site.css loads after main.css) while any component class
   (e.g. a button's white text) still wins. */
:where(.site-page) a{color:var(--c-accent);text-decoration:none}
:where(.site-page) a:where(:hover){color:var(--c-accent-dark)}
:where(.site-page) :is(button,input,textarea){font:inherit}

/* ---- shared page components (Products + Insights index) ---- */
.pg-hero{position:relative;overflow:hidden;background:#fff;padding:110px 48px 64px}
.pg-hero-wash{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(239,246,255,.7) 0%,rgba(255,255,255,0) 45%,rgba(255,251,235,.5) 100%);
}
.pg-hero-inner{position:relative;max-width:1280px;margin:0 auto}
.pg-eyebrow{
  margin:0 0 26px;font-family:var(--c-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;color:var(--c-accent);
}
.pg-h1{
  margin:0 0 28px;max-width:980px;color:var(--c-ink);
  font-size:56px;font-weight:300;letter-spacing:-.025em;line-height:1.15;text-wrap:pretty;
}
.pg-h1:last-child{margin-bottom:0}
.pg-emph{
  font-weight:500;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(90deg,#2563eb,#f59e0b);-webkit-background-clip:text;background-clip:text;
}
.pg-lede{margin:0;max-width:660px;font-size:20px;font-weight:300;line-height:1.6;color:#374151}
.pg-rule{width:56px;height:3px;background:var(--c-rule);margin-bottom:36px}

@media (max-width:768px){
  .pg-hero{padding-left:24px;padding-right:24px}
  .pg-h1{font-size:clamp(34px,8vw,44px)}
}