/* ═══════════════════════════════════════════════════════════════════
   Stax IQ premium design system · v2 (approved 5 Aug 2026)
   Loads AFTER each page's inline styles and polish.css, so it wins ties.
   It restyles the shared vocabulary every page uses (topbar, headings,
   buttons, cards, footer) and touches nothing page-specific: calculator
   controls, forms and scripts keep their own styling and behaviour.
   Palette: the established Stax IQ tokens. Type: General Sans display
   over Inter 19px body. Motion: 150ms lifts, soft reveals (premium.js).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg-primary:#F7F4ED;
  --pm-panel:#FBF9F4;
  --pm-ink:#1A2028;
  --pm-body:#3A4046;
  --pm-muted:#5F6469;
  --pm-line:#D9D5CB;
  --pm-green:#2F4A3E;
  --pm-green-deep:#243B31;
  --pm-tint:#E8F0EA;
  --pm-display:'General Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --pm-e:cubic-bezier(.32,.72,.28,1);
  --pm-sh-1:0 1px 2px rgba(20,22,26,.04),0 4px 16px rgba(20,22,26,.04);
  --pm-sh-2:0 2px 4px rgba(20,22,26,.04),0 12px 32px rgba(20,22,26,.07);
}

/* ── Typography: the display face carries the page ── */
h1,h2,h3,h4{font-family:var(--pm-display);color:var(--pm-ink);}
h1{font-weight:700;letter-spacing:-0.04em;line-height:1.06;}
h2{font-weight:700;letter-spacing:-0.03em;line-height:1.12;}
h3,h4{font-weight:600;letter-spacing:-0.02em;}

/* Reading pages: 19px body in a 680px measure (guides, legal, methodology) */
.article-wrap{max-width:680px;}
.article-wrap p,.article-wrap li{font-size:19px;line-height:1.75;color:var(--pm-body);}
.article-wrap h1{font-size:clamp(2.3rem,4.6vw,3.2rem);}
.article-wrap h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:2.2em;}
.article-wrap .lede{font-size:21px;line-height:1.7;color:var(--pm-muted);}
.eyebrow{font-size:13px;letter-spacing:0.15em;font-weight:600;color:var(--pm-muted);}

/* ── Topbar: light glass, replacing the dark bar site-wide ── */
.topbar{background:rgba(247,244,237,.85) !important;
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--pm-line);box-shadow:none;}
.topbar .wrap{height:64px;}
.topbar .mark{color:var(--pm-ink) !important;font-family:var(--pm-display);font-weight:700;letter-spacing:-0.03em;}
.topbar .mark span{color:var(--pm-green) !important;}
.topbar nav a{color:var(--pm-body) !important;font-weight:500;transition:color .15s var(--pm-e);}
.topbar nav a:hover{color:var(--pm-ink) !important;}
.topbar a.nav-pro{color:var(--pm-green) !important;border:1px solid var(--pm-green) !important;
  border-radius:10px;font-weight:600;background:transparent;transition:all .15s var(--pm-e);}
.topbar a.nav-pro:hover{background:var(--pm-green) !important;color:#fff !important;transform:translateY(-1px);}

/* ── Buttons: weight and lift, 150ms ── */
.btn-primary,.btn-secondary{border-radius:12px;font-weight:600;
  transition:transform .15s var(--pm-e),box-shadow .15s var(--pm-e),
    background .15s var(--pm-e),border-color .15s var(--pm-e),color .15s var(--pm-e);}
.btn-primary{background:var(--pm-green);
  box-shadow:0 1px 2px rgba(47,74,62,.3),0 8px 24px -8px rgba(47,74,62,.4);}
.btn-primary:hover{background:var(--pm-green-deep);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(47,74,62,.25),0 14px 32px -8px rgba(47,74,62,.45);}
.btn-secondary:hover{border-color:var(--pm-green);color:var(--pm-green);transform:translateY(-2px);}

/* ── Cards and link tiles: soft elevation, tiny lift ── */
.next-reads a,.guide-card,.card,.qa,.tile{border-radius:16px;
  transition:transform .18s var(--pm-e),box-shadow .18s var(--pm-e),border-color .18s var(--pm-e);}
.next-reads a:hover,.guide-card:hover,.tile:hover{
  transform:translateY(-3px);box-shadow:var(--pm-sh-1);border-color:var(--pm-green);}

/* ── Footer: centred site-wide (Paul, 5 Aug PDF comment 1) ── */
footer{text-align:center !important;}
footer .wrap>*{margin-left:auto !important;margin-right:auto !important;}
footer .fmark{font-family:var(--pm-display);font-weight:700;letter-spacing:-0.03em;font-size:1.3rem;}
footer .fnav{justify-content:center !important;}
footer .disc,footer .lic{line-height:1.7;}

/* ── Reveal motion (premium.js adds .prv, then .in on intersection) ── */
.prv{opacity:0;transform:translateY(22px);
  transition:opacity .3s var(--pm-e),transform .3s var(--pm-e);}
.prv.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .prv{opacity:1 !important;transform:none !important;transition:none !important;}
  .btn-primary:hover,.btn-secondary:hover,.next-reads a:hover{transform:none;}
}